CSS 定位和显示顺序

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;
}

这样列表本身会 float 到右边距，但其中元素的顺序不会颠倒。