防止元素包裹

Question

防止HTMLElement包裝的“最佳”方法或“最佳做法”是什么？

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

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

本示例使用float:left樣式，但是當右側沒有足夠的空間時，它還會包裝新的Elements。

所以我的問題是：

• 有沒有辦法完全拒絕包裝？
• 如果是這樣，最佳做法是什么？

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] ，如該小提琴所示。