0

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

我 在这个线程中找到了这个：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>
​&lt;/ul>​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS：

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

2 回答 2

2

您可以尝试给出宽度%而不是px 

ul { width: 650px; }
ul li { width: 20%; position: relative; display: inline-block; float: left; }
ul li.last { float: right; text-align: right; }​
于 2012-12-13T10:52:14.243 回答
0

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

<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 用于布局。
于 2012-12-13T10:25:31.743 回答