水平方向的瓷磚可以在CSS中伸展其父寬度嗎？

如果我有這樣的佈局HTML：水平方向的瓷磚可以在CSS中伸展其父寬度嗎？

<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>拉伸到它的內容（400像素）的大小，而不是兩個<li>的元素包裝到下一行。

這是可能的CSS？我總是用JavaScript計算<li>元素，並將寬度設置爲<ul>。

來源

2012-06-01 Marty

這應該這樣做（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）以使其佔用其內容的大小。

來源

2012-06-01 02:37:11 ScottS

好 - 所以它是'inline-block'和'white-space：nowrap'的組合。謝謝！ – Marty

@ MartyWallace - 是的，它讓'li'元素不會被包裹，那麼如果你真的希望'ul'在寬度上擴展（否則，'li'只是溢出'ul'），一個還有兩件事需要做到'ul'。 – ScottS

當你像這樣浮動<li>時，你可以從<ul>中有效地將其刪除。你確定這就是你想要做的？爲什麼不只是浮動整個列表？

來源

2012-06-01 02:42:56

水平方向的瓷磚可以在CSS中伸展其父寬度嗎？

回答

相關問題