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以便它們在同一行上彼此相鄰。