javascript - 文本之间具有相等间距的行内 block 列表。

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; }​