防止元素包裝

Question

防止HTMLElement包裝的「最佳」方式或「最佳做法」是什麼？

我實際上是在談論定位元素relative。我認爲您可以使用absolute元素並將它們的left位置附加到anotherElement.width。

例子：http://jsfiddle.net/YX4cm/

本例使用float:left的風格，但它也包裝新的元素時，沒有在右側足夠的空間。

所以在這裏，我的問題是：

• 有沒有辦法完全否定包裝？
• 如果是這樣，那麼最佳做法是什麼？

Answer 1

一種方法是使用兩個容器系統，與內部容器集以絕對的位置，所以你不必實際觸摸內在的，重複的元素的風格。

小提琴：http://jsfiddle.net/3kB3D/

HTML：

<div id='container'> 
    <ul> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
    </ul> 
</div> 

CSS：

#container { width: 200px; background: black; height: 50px; padding: 10px; } 
ul { position: absolute; } 
li { float: left; margin-right: 12px; width: 50px; height: 50px; background: red; } 

Answer 2

的white-space: nowrap和display: inline-block組合似乎工作：http://jsfiddle.net/YX4cm/2/

編輯：Works的身體以及http://jsfiddle.net/YX4cm/5/

Answer 3

你可以包裝在一個容器元素，其定位絕對的元素，具有CSS屬性min-width:[large value]，如this fiddle