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 lik

Solution 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/

Solution 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/

Solution 3:

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

the css to accomplish what you want is

#list li{display:inline-block}

Solution 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