如何在无序列表的情况下模拟无序列表中的浮动列表项？

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的情况下实现所需的样式？

Answer 1

不要使用float,但要显示导航项:inline-block.如果将容器设置为text-align:right,则块将"向右"浮动.

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

如果要支持Internet Explorer 7,则应添加zoom: 1和*display: inline.