How to make a HTML list appear horizontally instead of vertically using CSS only?
Solution 1:
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>Solution 2:
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>Solution 3:
quite simple:
ul.yourlist li { float:left; }
or
ul.yourlist li { display:inline; }
Solution 4:
You can directly use inline styling something like this
<ul style="list-style: none; margin: 0; padding: 0;">
<li style="display: inline">A</li>
<li style="display: inline">B</li>
<li style="display: inline">C</li>
<li style="display: inline">D</li>
</ul>