防止元素包装

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