[英]Prevent element wrapping
What is the "best" way or "best practice" to prevent an HTMLElement
from wrapping ? 防止
HTMLElement
包装的“最佳”方法或“最佳做法”是什么?
I'm actually talking about relative
positioned elements. 我实际上是在谈论
relative
定位的元素。 I think you could just use absolute
elements and append those with their left
position to anotherElement.width
. 我认为您可以只使用
absolute
元素,并将其left
位置附加到anotherElement.width
。
Example: http://jsfiddle.net/YX4cm/ 示例: http : //jsfiddle.net/YX4cm/
This example uses a float:left
style, but it also wraps new Elements when there is not enough space on the right side. 本示例使用
float:left
样式,但是当右侧没有足够的空间时,它还会包装新的Elements。
So my question here are: 所以我的问题是:
A combination of white-space: nowrap
and display: inline-block
seems to work: http://jsfiddle.net/YX4cm/2/ white-space: nowrap
和display: inline-block
似乎起作用: http : //jsfiddle.net/YX4cm/2/
Edit: Works for body as well http://jsfiddle.net/YX4cm/5/ 编辑:也适用于身体http://jsfiddle.net/YX4cm/5/
One way would be to use a two-container system, with the inner container set to position absolute so you don't have to actually touch the styles of the inner, repeated elements. 一种方法是使用两容器系统,将内部容器设置为绝对位置,这样您就不必实际触摸内部重复元素的样式。
Fiddle: http://jsfiddle.net/3kB3D/ 小提琴: http : //jsfiddle.net/3kB3D/
HTML: HTML:
<div id='container'>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
CSS: 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]
,如该小提琴所示。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.