內聯塊列表，文本之間的空格相等。

Question

我有一個列表，其中包含五個內聯顯示的項目。 第一個列表項中的文本必須與左側對齊，最后一個項與右側對齊。 我想要的是每個項目中的文本之間的相等間距，並且仍然相對於右側和左側。

我在這個帖子中找到了這個： http ： //jsfiddle.net/Cerebrl/Wt4hP/ ： 內聯塊列表項之間的空格

這是行不通的，因為它全部與左邊對齊。 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進行布局。