css - 如何在不颠倒顺序的情况下直接在无序列表中模拟浮动列表项？

Question

我的网站上有一个导航菜单，它是一个无序列表。项目自然地从左到右以正确的顺序显示。它看起来像这样：

|[--1--][-2-][----3----][--4--].......|
|[---5---][-6-][-----7-----][-8-].....|
|[------9------][----10----]..........|

显然，如果我将所有列表项（“li”）浮动到右侧，它们将显示在我希望它们购物的位置——但顺序相反：

|.......[--4--][----3----][-2-][--1--]|
|.....[-8-][-----7-----][-6-][---5---]|
|..........[----10----][------9------]|

我喜欢这个定位，但我不想要颠倒的顺序。我需要它看起来像这样：

|.......[--1--][-2-][----3----][--4--]|
|.....[---5---][-6-][-----7-----][-8-]|
|..........[------9------][----10----]|

我提出的限制是我不能以相反的顺序重写菜单 HTML。我想单独在 CSS 中做到这一点。据推测，这可以通过将无序列表（“ul”）向右浮动，并将列表项（li）向左浮动来完成。但是，我没有成功，因为我的 CSS 太小了，我不确定我可能会错过什么。

在不更改 HTML 的情况下是否可以实现所需的样式？

score 23 · Accepted Answer

不要使用浮动，而是让导航项显示：inline-block。如果将容器设置为 text-align: right，块将“浮动”到右侧。

nav{text-align: right;}
nav li{display: inline-block; text-align: center;}

如果您想要支持 Internet Explorer 7，您应该添加zoom: 1和*display: inline.

score 0 · Accepted Answer

有什么理由不只是浮动<ul>？

ul {
  list-style-type: none;
  float: right;
}
li { float: left; }

2 回答 2