我希望在一行中有两组列表项,以便一组从左到右,另一组从右到左;像这样：
[li1 li2 li3]........................................[li6 li5 li4]
我试过这个：
li{
display:inline;
}
#left{
float:left;
}
#right{
float:right;
direction:rtl;
}
<ul>
<span id="left">
<li> item1</li>
<li> item2</li>
<li> item3</li>
</span>
<span id="right">
<li> item4</li>
<li> item5</li>
<li> item6</li>
</span>
</ul>
输出有效,但代码无效,因为它使用< span>直接在< ul>下.
什么是有效的代码？
解决方法
你对< span>是正确的直接在< ul>下无效.这里有一些解决方案：
将浮动赋予< li>元素直接.
li{
display:inline;
float: left;
}
.right{
float:right;
direction:rtl;
}
<ul>
<li> item1</li>
<li> item2</li>
<li> item3</li>
<li class="right"> item4</li>
<li class="right"> item5</li>
<li class="right"> item6</li>
</ul>
使用nth-of-type或nth-child.
我认为这是一个很好的清洁解决方案.虽然如果在列表中添加/删除项目,则必须更改css：
li {
display: inline;
float: left;
}
li:nth-of-type(n+4) {
float: right;
}
<ul> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> <li>item6</li> </ul>
此外,您似乎可以省略方向：来自您的代码的rtl.
