Question

我有一块HTML：

<ul>
  <li>a</li>
  <li>b</li>
  <li class="nav">c</li>
  <li class="nav">d</li>
</ul>

和CSS规则集：

ul li {
 display: inline;
}

li.nav {
 float: right;
}

不符合我的意图：我希望它显示如下：

ab                                      cd

但是它是

ab                                      dc

不同之处在于元素的显示顺序。如何按语法顺序显示“nav”类的列表项？

Answer 1

嗯，显而易见的快速解决方法就是颠倒列表中元素的顺序：

<ul>
  <li>a</li>
  <li>b</li>
  <li class="nav">d</li>
  <li class="nav">c</li>
</ul>

我猜测会发生什么，每当渲染引擎遇到带float:right的元素时，它会尽可能向右推动该元素。所以它首先遇到“c”并将其一直向右推，然后它遇到“d”并尽可能向右推 - 但“c”已经占据了最右边的位置，所以“d” “停留在左边。基本上，元素按从右到左的顺序排列，而不是从左到右的顺序。

我认为另一个选择是将元素划分为两个列表，并将float: right样式作为一个整体应用于第二个列表（即<ul>元素）。

<ul>
  <li>a</li>
  <li>b</li>
</ul>
<ul class="nav">
  <li>c</li>
  <li>d</li>
</ul>

和

ul li {
 display: inline;
}

ul.nav {
 float: right;
}

这样，列表本身会浮动到右边距，但其中元素的顺序不会反转。

Answer 2

我通过将列表分成两个并float将它们分别放到各自的位置来修复此问题。我用div包裹了两个列表并将overflow: auto应用于它。我的最终CSS代码如下所示：

ul li {
 display: inline
}

div.post-info-wrap {
 overflow: auto
}

ul.post-info {
 float: left
}

ul.nav {
 float: right
}

和我的标记如下：

<div class="post-info-wrap">
  <ul class="post-info">
    <li/>
  </ul>
  <ul class="nav">
    <li/>
  </ul>
</div>

Answer 3

如果你想要c＆amp; d要显示在右侧的块中，您必须将它们放在一个块元素中，而不是在两者上都设置float属性。我不认为像<li>这样的列表元素是您的意图的正确选择。您不希望显示单个列表，因此您可以尝试使用两个列表（其中一个列表具有float属性）或仅使用简单的<div>元素。

Answer 4

实际上你想要一个导航列表和其他一些列表？为什么不使用2个列表？

<ul class="other">
  <li>a</li>
  <li>b</li>
 </ul>
<ul class="nav">
 <li>c</li>
 <li>d</li>
</ul>

和css：

ul li {
display: inline;
}

.other{
float:left;
}

.nav {
float: right;
}

Answer 5

将ul浮动到您希望内容/容器所在的位置，并按照您希望显示的顺序浮动li。

<div id="myblock">
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
   </ul>
</div>

CSS

#myblock ul {
   display:inline;
   float:right;
}

#myblock li {
   float:left;
 }

相反（向左浮动，但顺序相反）

#myblock ul {
   display:inline;
   float:left;
}

#myblock li {
   float:right;
 }

Answer 6

试试这个：

    ul {
        text-align: right;
    } 
    ul li {
     display: inline;
    }

    ul li.default {
     float: left;
    }
    li.nav {
     float: auto;
    }

<ul>
  <li class="default">a</li>
  <li class="default">b</li>
  <li class="nav">c</li>
  <li class="nav">d</li>
</ul>

CSS定位和显示顺序

6 个答案: