html – 如何在一行中设置两组>？

发布时间：2020-12-14 18:43:53 所属栏目：资源来源：网络整理

导读：我希望在一行中有两组列表项,以便一组从左到右,另一组从右到左;像这样： [li1 li2 li3]........................................[li6 li5 li4] 我试过这个： li{ display:inline; }#left{ float:left; }#right{ float:right; direction:rtl; } ul span id="

我希望在一行中有两组列表项,以便一组从左到右,另一组从右到左;像这样：

[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.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

html – 如何在一行中设置两组&gt;？

解决方法

html – 如何在一行中设置两组>？