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%; на уль элемента, но он не работает. Как мне это сделать?

Answer 1

#page ul li { 
width: 100%; 
} 

Это сделает элемент списка 100% width из ul родителя. Также ul составляет 100%;

Answer 2

Ширина списка должна быть уже на 100%. <li>, <ul> и <div> - все элементы уровня блока уже и должны по умолчанию занимают 100% ширины.

Но <a> является рядным уровневого элемента по умолчанию, поэтому width не будет применяться. Вам нужно сделать блок -уровневой элемент с display:inline-block; и width:100%, чтобы ширина была 100% ее ширины.

Я подозреваю, что вы также хотите дать ширину и сделать их display:inline-block так, чтобы они сидели рядом друг с другом на одной линии.

Answer 3

Попробуйте следующее: ширина 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/