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

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