Возможно ли горизонтально ориентированные плитки растягивать ширину родительского элемента в CSS?

Question

Если у меня есть этот макет в HTML:

<div> 
    <ul> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
    </ul> 
</div> 

С помощью этого CSS:

div 
{ 
    width: 200px; 
    overflow: hidden; 
} 

ul 
{ 
    list-style: none; 
    height: 100px; 
} 

li 
{ 
    display: block; 
    width: 100px; 
    height: 100px; 
    float: left; 
} 

Я хочу <ul> растягивать до размера его содержания (400px), а не два из <li> элементы обертываются на следующую строку.

Возможно ли это с помощью CSS? Я всегда просто считал элементы <li> с JavaScript и устанавливал ширину <ul>.

Answer 1

Это должно сделать это (see fiddle, конечно, она скрывает некоторые из вашей overflow: hidden на DIV, remove that and you see it is working):

ul 
{ 
    list-style: none; 
    height: 100px; 
    white-space: nowrap; 
} 

li 
{ 
    display: inline-block; 
    width: 100px; 
    height: 100px; 
} 

Хотя на самом деле получить ul растянуть по размеру (it doesn't with just the above code), он также необходимо иметь display: inline-block (see fiddle) или float (see fiddle), чтобы получить размер его содержимого.

Answer 2

Когда вы плаваете <li>, вы фактически удаляете его из <ul>. Вы уверены, что это то, что вы хотите сделать? Почему бы просто не всплыть весь список?