如何使用CSS浮动内联元素

Question

假设我有以下标记语言：

<ul class="editor">
<li> 
  <a href="#">Modules</a>
  <a href="#">View</a>
  <a href="#">Add</a>
</li>
<li> 
  <a href="#">Sections</a>
  <a href="#">View</a>
  <a href="#">Add</a>
</li>
</ul>

如何将“view”和“add”向右浮动，以便以与HTML相同的顺序显示？

现在，如果我这样做，它们会出现在错误的顺序：

.editor li a:nth-child(2), .editor li a:nth-child(3){
  float:right;
}

我会得到一个看起来像这样的行：

Modules                           Add View

但是我想要。

Modules                           View Add

这只能通过 CSS3 实现吗？ 编辑：抱歉我应该提到，我没有访问HTML，只有CSS。

- Jess

---

每个li都在自己的行中，对吗？（你清除了浮动等等） - BoltClock

任何浮动元素都会自动变成块级元素。 - alex

Answer 1

将 li 右对齐并仅将第一个 a 左浮动。

.editor li {
  text-align: right; 
}
.editor li a:nth-child(1) {
  float: left;
}

我假设您已经隐藏了默认的列表符号.

- BalusC

---

我知道问题要求“仅使用CSS3”，但是... a:first-child ;) - BoltClock

Answer 2

只需要改变顺序。

<ul class="editor">
<li> 
  <a href="#">Modules</a>
  <a href="#">Add</a>
  <a href="#">View</a>
</li>
<li> 
  <a href="#">Sections</a>
  <a href="#">Add</a>
  <a href="#">View</a>
</li>
</ul>

- kbtz

---

抱歉，我应该提到，我没有访问HTML的权限，只有CSS。 - Jess

Answer 3

尝试使用具有显式分布和box-ordinal-group属性的CSS3弹性盒模型（http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/），如果您无法通过浮动使其正常工作，也许它提供了一些实现相同效果的替代方法。除此之外，当然您可以更改DOM顺序或通过其他方式模拟布局，但如果您想保留结构，则不建议这样做。

- entonio

Answer 4

重新组织你的DOM，使得Add在View之前，并将它们向右浮动。

- yoka

---

抱歉，我应该提到，我没有访问HTML的权限，只有CSS。 - Jess