- Add another container that handles the scrolling of its content
- Make the
li
bedisplay: inline-block
so they'll stack next to each other - Set
white-space: nowrap
on theul
so theli
elements will stay on one line in its narrow container
Make li elements stack horizontally
-
16-07-2023 - |
Question
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
Solution
OTHER TIPS
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/
<ul id="list">
<li></li>
<li></li>
<li></li>
</ul>
the css to accomplish what you want is
#list li{display:inline-block}
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
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow