<ul> 在孩子之间平均分享宽度<li>

Question

可能的重复项：
HTML 列表元素：将父宽度分成相等的部分

我有一个包含ul元素的div：

<div style="width: 800px">
    <ul style="width: 100%">
        <li>...</li>
        ....
        <li>...</li>
    </ul>
</div>

如何在整个ul中自动为li元素提供相等的空间？

Answer 1

如果您希望水平跨越列表，这应该就足够了：

HTML
<div>
    <ul id="list">
        <li><a href="#">Item one</a></li>
        <li><a href="#">Item two</a></li>
        <li><a href="#">Item three</a></li>
        <li><a href="#">Item four</a></li>
        <li><a href="#">Item five</a></li>
    </ul>
</div>
CSS
#list li
{
    display: inline;
    list-style-type: none;
    padding-right: 20px;
}

在这种情况下，我调整填充以均匀地跨越项目，就像我希望的那样。

Answer 2

我会使用这个css：

 #list li
{
    display: inline;
    list-style-type: none;
    padding-right: 20px;
    ***width:100px;***
}