CSS样式如何在一行中显示特定项目符号

Question

在下面的示例中,我希望项目2和3并排显示,其余项目保持为堆叠无序列表.在css中如何做到这一点？

<li><i class="icon-caret-right"></i>textone</li>
<li><i class="icon-caret-right"></i>texttwo</li>
<li><i class="icon-caret-right"></i>textthree</li>
<li><i class="icon-caret-right"></i>textfour</li>

此代码如下所示.

textone

texttwo

textthree

textfour

但我想将此图显示为下图.如何在CSS中执行此操作？

Answer 1

一个简单的浮动和边距就可以了。

.stack {
    float: left;
    margin: 0 20px 0 0;
}

<li><i class="icon-caret-right"></i>textone</li>
<li class="stack"><i class="icon-caret-right"></i>texttwo</li>
<li><i class="icon-caret-right"></i>textthree</li>
<li><i class="icon-caret-right"></i>textfour</li>