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>

我如何向右侧浮动'视图'和'添加'以便右侧使它们以与html相同的顺序出现？

现在，如果我这样做

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

我会得到一行看起来像：

Modules                           Add View

但我想要

Modules                           View Add

这可以通过 CSS3 吗？

修改：对不起，我应该提到，我没有访问HTML。只有css

Answer 1

文本 - 将li右对齐并仅浮动第一个a左侧。

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

我假设您已经隐藏了默认列表项目符号。

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>

Answer 3

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

Answer 4

重组你的DOM，使Add在View之前，并将它们浮动到右边。

如何使用css浮动内联元素

4 个答案: