LI元素使用float left属性对齐到容器的右侧？

Question

在这段代码中，LI元素采用了float:left并排列在容器的左侧。我想让它们对齐到右侧。如何使用CSS实现？

例如： [Item1.Item2..................................]

以下是HTML代码：

<div class="menu">
  <ul>
    <li>Item1</li>
    <li>Item2</li>
  </ul>
</div>

注意：LI元素的顺序不能颠倒。

- vicuv

---

你试过使用 float: right 吗？ - James Montagne

Answer 1

试试这个

<div class="menu">
  <ul>
    <li>Item1</li>
    <li>Item2</li>
  </ul>
</div>

CSS

.menu
{ float:right;
}
.menu li
{ float:left;
}

或者使用float:right将ul排列到右侧

.menu ul
{ float:right;
}
.menu li
{ float:left;
} 

JSFiddle 示例

- Sanooj

Answer 2

使

元素变为行内元素，并在

上添加text-align:right样式。


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

http://jsfiddle.net/XKARB/

- Galen

---

他将失去列表样式标记。但我猜他也不想要它们。 - Marian Theisen

他将它们向左浮动，所以我认为他不想要列表样式。 - Galen

这是最佳解决方案。同时，display: inline-block;将允许LIs具有宽度/高度。 - LessQuesar

Answer 3

将您的HTML中的li顺序反转，并使用float: right

- Marian Theisen

---

这是不可能的，因为LI的源代码在多个模板之间共享，这些模板可能需要项目的直接顺序。 - vicuv

你尝试过将 ul 右浮动（在包装的 div 中）吗？ - Marian Theisen

我是指在li上使用float:left，在ul上使用float:right可能会起作用。 - Marian Theisen

是的，我尝试了将text-align:right应用于容器DIV，但没有起作用。 - vicuv

在这里运行良好（http://jsfiddle.net/XZbNa/）。当然，div需要一个固定的宽度。如果您不想要那个，您可以使用“position: absolute”和“right: 0”将您的ul或div固定到右侧。 - Marian Theisen

在li元素上使用float:left，在ul元素上使用float:right可以实现效果，但在IE8上会出错。不过这是个好主意。谢谢。 - vicuv