html - How to arrange many
elements side by side with no wrap

Question

There are three div elements side by side in a container div, with smaller width than children total width. Here you can find the Fiddle of the case:

I want to make container div scroll horizontally in order to show other children.

How can I arrange children not to wrap inside container div? It scroll vertically now, I want it to scroll horizontally.

score 37 · Accepted Answer

37

Change float: left to display: inline-block; and add white-space: nowrap to the container.

于 2012-04-22T15:36:52.840 に答える

score 3 · Accepted Answer

You need a another div within the scrolling div that has a total width equal to all of the widths of it's children.

There was already an extra div there so I used that one

Bonus: To get rid of the vertical scroll bar use overflow-y: hidden. See: http://jsfiddle.net/joshdavenport/SasDh/3/

score 1 · Accepted Answer

1

The <span> tag is used to group inline-elements in a document.
(source)

于 2015-04-27T11:55:46.790 に答える

3 に答える 3