javascript - 防止元素包裹

Question

HTMLElement防止包装的“最佳”方式或“最佳实践”是什么？

我实际上是在谈论relative定位元素。我认为您可以只使用absolute元素并将它们的left位置附加到anotherElement.width.

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

这个例子使用了一种float:left样式，但是当右侧没有足够的空间时，它也会包裹新的元素。

所以我的问题是：

• 有没有办法完全拒绝包装？
• 如果是这样，最好的做法是什么？

Answer 1

white-space: nowrap和的组合display: inline-block似乎有效：http: //jsfiddle.net/YX4cm/2/

编辑：也适用于身体http://jsfiddle.net/YX4cm/5/

Answer 2

一种方法是使用双容器系统，将内部容器设置为绝对位置，这样您就不必实际接触内部重复元素的样式。

小提琴：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 3

您可以将元素包装在一个容器元素中，该元素是绝对定位并具有 css 属性min-width:[large value]，如this fiddle所示