Question

我有一个列表，其中有五个项目以内联方式显示。第一个列表项中的文本必须与左侧对齐，最后一个项与右侧对齐。我想要的是每个项目中的文本之间的间距相等，并且仍然相对于右侧和左侧。

我发现了这个：http://jsfiddle.net/Cerebrl/Wt4hP/ 在这个帖子中：A Space between Inline-Block List Items

由于它全部与左边对齐，所以不起作用。 Bellow是一个示例代码，也是jsfiddle： http://jsfiddle.net/phacer/uV9s9/

任何想法？如果有的话，js或jquery解决方案也适用于我。

<ul>
    <li>first item</li>
    <li>second item</li>
    <li>3 item</li>
    <li>fourth item</li>
    <li class='last'>5 item</li>
</ul>

的CSS：

ul { width: 650px; }
ul li { width: 130px; position: relative; display: inline-block; float: left; }
ul li.last { float: right; text-align: right; }

Answer 1

您可以尝试使用%代替px

ul { width: 650px; }
ul li { width: 20%; position: relative; display: inline-block; float: left; }
ul li.last { float: right; text-align: right; }

Answer 2

如果你总是拥有相同数量的元素和相同宽度的容器，你可以试试这个：

<ul>
  <li class='first'>first item</li>
  <li>second item</li>
  <li>3 item</li>
  <li>fourth item</li>
  <li class='last'>5 item</li>
</ul>


ul { width: 650px; }
ul li { width: 130px; position: relative; display: inline-block; float: left; text-align: center; }
ul li.last { float: right; text-align: right; }
ul li.first {text-align: left; }

http://jsfiddle.net/x96eN/1/

我认为，这就是你所追求的。由于文本的对齐方式不同，中间会有轻微的聚束。你可以：

在所有li元素中使用左对齐文本，但使包含框可见。这将在视觉上重新平衡事物。
使用第一个，最后一个和中心lis的宽度进行播放以隐藏效果。
使用填充来专门更改不同li元素中文本的位置。
在JQuery中创建一个通用案例，以对齐任意数量的li元素。如果你想要多于或少于5，或者你需要改变整体宽度，无论如何你都需要这样做 - 虽然我不喜欢使用JS进行布局。

内联块列表，文本之间的空格相等。

2 个答案: