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

时间:2012-12-13 10:02:00

标签: javascript jquery html css

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

我发现了这个: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; }​

2 个答案:

答案 0 :(得分:2)

您可以尝试使用%代替px

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

答案 1 :(得分: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进行布局。