如何避免div显示在新行中

Question

I have a list of div displayed on the same line. When the page is not wide enough to display all the div on the same line, I don't want extra div to be displayed on the next line. How can I avoid displaying extra div on a new line?

Here is a jsFiddle: http://jsfiddle.net/YCFZM/

Try to reduce width on the page and you'll see some div displayed on a new line.

Thanks.

Answer 1

Updated gist with solution: http://jsfiddle.net/Meligy/YCFZM/16/

Main changes:

• Removed extra quote in HTML at id=""sidebar" which was breaking the gist
• Removed height: 0px; from div#sidebar CSS
• Added white-space:nowrap; to div#sidebar CSS
• Removed float:left from div.sidebar-item CSS
• Added white-space: nowrap; display:inline-block; white-space: nowrap; display:inline-block; to div.sidebar-item CSS

Optionally you can also remove text-align:center; from div#sidebar CSS if you meant to make the text be to the left.

Answer 2

在样式表中，将display属性与文档上的内联值一起使用

Answer 3

As far as my knowledge goes the only solution to this is to have a fixed width for the container. Or to have an element in the container which has a fixed width

Answer 4

You need to set a min-width which is large enough to encompass the divs. Also, you had an extra quotation mark in your jsfiddle which was preventing your styling from being applied and for some reason the height property was set to 0 . I've adapted your jsfiddle here to display the behaviour I think your after.