Make li elements stack horizontally

问题

I need the following li to stack against each other in a horizontal fashion like so:

*li1 *li2 *li3

instead of:

 * li
 * li
 * li

Pretty much the li elements would be aligned like a gallery with the lis to the right being hidden and scrolled as needed.

Here is the JSFiddle

回答1:

• Add another container that handles the scrolling of its content
• Make the li be display: inline-block so they'll stack next to each other
• Set white-space: nowrap on the ul so the li elements will stay on one line in its narrow container

http://jsfiddle.net/EvilOatmeal/nxGG2/2/

回答2:

You need to make the li elements be display:inline-block and their container to be white-space:nowrap

Demo at http://jsfiddle.net/RnXDF/1/

回答3:

<ul id="list">
<li></li>
<li></li>
<li></li>
</ul>

the css to accomplish what you want is

#list li{display:inline-block}

回答4:

remove the width in .comments and then add display:inline-block to .comments li , It wasn't working because you are restraining the width of the list causing that when you try to display it horizontally there is not enough space to place it the

horizontally

来源：https://stackoverflow.com/questions/23504454/make-li-elements-stack-horizontally