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;

}

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

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

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

Answer 3

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

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

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

ul 100％的父母

3 个答案: