三个<li>，左中和右</li>

Question

我有三个<li>。不幸的是，我不能给他们每个人自己的班级名称（否则这会更容易）。

我需要让一个与左边对齐，一个到中心，一个到右边。有什么方法可以在CSS中执行此操作，可以解释可变大小的<ul>？

查看其他问题可以选择使用li:last-child。对于任何使用大多数IE的人来说，这仍然是一个问题，因为IE9中只存在支持。

Answer 1

虚构http://jsfiddle.net/q4d9r/

在33%项上使用float:left和li的宽度。

将ul设置为您想要的width。

修改

如果你绝对需要完美地对齐它们，你可以在上面的方法之上使用inline样式。

http://jsfiddle.net/q4d9r/1/

<ul class="test">
    <li style="text-align:left">Item One</li>
    <li style="text-align:center">Item Two</li>
    <li style="text-align:right">Item Three</li>
</ul>

Answer 2

[编辑]到我发帖的时候，基本浮动就够了，我为好奇的人留下了答案:) [/ edit]

我想到的有两个选项，不使用float，也不显示：table; （实际上有4种选择是可用的）：

1）显示：flex;

2）text-align：justify;和一些调整：

http://codepen.io/gc-nomade/pen/zcGmC

<ul class="flex">
  <li>flex me</li>
  <li>flex me</li>
  <li>flex me</li>
</ul>
<ul class="justify">
  <li>Justify me</li>
  <li>Justify me</li>
  <li>Justify me</li>
</ul>

.flex {
  display:flex;
  justify-content:space-between;
}

.justify {
  text-align:justify;
}
.justify:after {
  content:'';
  display:inline-block;
  width:100%;
}
.justify li {
  display:inline-block;
}