html - 均摊宽度其中孩子们

Question

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

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

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

如何li在整个ul?

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