How to make a HTML list appear horizontally instead of vertically using CSS only?
-
23-09-2019 - |
Question
I need this because I want to make a menu (which is made from a HTML list) appear horizontally.
I prefer not to use absolute positioning since it might become messy when I start changing the layout of the page.
I would like also to remove the indenting of the sub-lists. Is it possible?
Solution
You will have to use something like below
#menu ul{
list-style: none;
}
#menu li{
display: inline;
}
<div id="menu">
<ul>
<li>First menu item</li>
<li>Second menu item</li>
<li>Third menu item</li>
</ul>
</div>
OTHER TIPS
quite simple:
ul.yourlist li { float:left; }
or
ul.yourlist li { display:inline; }
Using display: inline-flex
#menu ul {
list-style: none;
margin: 0;
padding: 0;
display: inline-flex
}
<div id="menu">
<ul>
<li>1 menu item</li>
<li>2 menu item</li>
<li>3 menu item</li>
</ul>
</div>
Using display: inline-block
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu li {
display: inline-block;
}
<div id="menu">
<ul>
<li>1 menu item</li>
<li>2 menu item</li>
<li>3 menu item</li>
</ul>
</div>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow