- 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 - |
문제
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
해결책
다른 팁
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
제휴하지 않습니다 StackOverflow