html - 如何在单行中设置两组<li>的样式？

我希望一行中有两组列表项，以便一组从左到右，另一组从右到左；像这样:

[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>无效下是正确的。以下是一些解决方案:
直接将float赋予<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>

同样，您似乎可以从代码中省略direction: rtl。

关于html - 如何在单行中设置两组<li>的样式？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37121101/