0

我希望我的列表宽度是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 元素，但它不起作用。我该怎么做？

4

3 回答 3

2

试试这个：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/

于 2013-07-04T13:50:35.270 回答
0

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

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

我怀疑你也想给<li>a 宽度并让它们display:inline-block在同一条线上彼此相邻。

于 2013-07-04T13:48:39.787 回答
0 
#page ul li {
width: 100%;
}

这将使列表元素100% width成为ul父元素。ul 也是 100%；

于 2013-07-04T13:46:56.623 回答