HTMLElement
防止包装的“最佳”方式或“最佳实践”是什么?
我实际上是在谈论relative
定位元素。我认为您可以只使用absolute
元素并将它们的left
位置附加到anotherElement.width
.
示例:http: //jsfiddle.net/YX4cm/
这个例子使用了一种float:left
样式,但是当右侧没有足够的空间时,它也会包裹新的元素。
所以我的问题是:
- 有没有办法完全拒绝包装?
- 如果是这样,最好的做法是什么?
HTMLElement
防止包装的“最佳”方式或“最佳实践”是什么?
我实际上是在谈论relative
定位元素。我认为您可以只使用absolute
元素并将它们的left
位置附加到anotherElement.width
.
示例:http: //jsfiddle.net/YX4cm/
这个例子使用了一种float:left
样式,但是当右侧没有足够的空间时,它也会包裹新的元素。
所以我的问题是:
white-space: nowrap
和的组合display: inline-block
似乎有效:http: //jsfiddle.net/YX4cm/2/
编辑:也适用于身体http://jsfiddle.net/YX4cm/5/
一种方法是使用双容器系统,将内部容器设置为绝对位置,这样您就不必实际接触内部重复元素的样式。
小提琴: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; }
您可以将元素包装在一个容器元素中,该元素是绝对定位并具有 css 属性min-width:[large value]
,如this fiddle所示