ul 100％的父母

Question

我希望我的列表宽度为其父宽度的100% 。 这是我的代码：

HTML：

<div id="page">
    <ul class="tab" >

        <li class="tab1">
            <a > Overview</a>
        </li>
        <li class="tab12">
            <a > Overview2</a>
        </li>
     </ul></div>

CSS：

body>#page {
    margin: 0 auto;
    width: 980px;
    text-align: left;
    padding-bottom: 20px;

}

我试过width: 100%; 在ul元素上，但它不起作用。 我该怎么做？

Answer 1

试试这个：ul的宽度是100％，div的宽度是980像素。

HTML：

<div id="demo">
    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>
</div>

CSS：

div#demo {
    width:980px;
}

div#demo ul {
    width:100%;
}

div#demo li {
    display:inline-block;
    width:33%;
}

http://jsfiddle.net/EU65T/

Answer 2

#page ul li {
width: 100%;
}

这将使列表元素成为ul父级的100% width 。 ul也是100％;

Answer 3

列表宽度本身应该已经是100％宽。 <li> ， <ul>和<div>都是块级元素，默认情况下应占用宽度的100％。

但是默认情况下<a>是内联级元素，因此width不适用。 您需要使用display:inline-block;将其设为块级元素display:inline-block; 和width:100% ，宽度为其父级宽度的100% 。

我怀疑你也希望给<li>一个宽度并使它们display:inline-block以便它们在同一行上彼此相邻。