防止元素缠绕

Prevent element wrapping

本文关键字：缠绕 元素      更新时间：2023-09-26

防止HTMLElement包装的"最佳"方法或"最佳实践"是什么？

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

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

此示例使用float:left样式，但当右侧空间不足时，它也会包装新元素。

所以我的问题是：

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

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

Fiddle：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; }

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

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

您可以将元素包装在容器元素中，容器元素的位置是绝对的，具有css属性min-width:[large value]，如本文中所示

相关文章：