Prevent element wrapping

Question

What is the "best" way or "best practice" to prevent an HTMLElement from wrapping ?

I'm actually talking about relative positioned elements. I think you could just use absolute elements and append those with their left position to anotherElement.width .

Example: 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.

So my question here are:

• is there a way to completely deny wrapping ?
• if so, what is the best practice for that ?

Answer 1

A combination of white-space: nowrap and display: inline-block seems to work: http://jsfiddle.net/YX4cm/2/

Edit: Works for body as well http://jsfiddle.net/YX4cm/5/

Answer 2

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/

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