文本之间具有相等间距的内联块列表。

Question

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

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

这行不通，因为它都向左对齐。 贝娄是一个示例代码，也在 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 用于布局。