How to make a <ul> display in a horizontal row
HtmlCssHtml ListsHtml Problem Overview
How can I make my list items appear horizontally in a row using CSS?
#div_top_hypers {
background-color:#eeeeee;
display:inline;
}
#ul_top_hypers {
display: inline;
}
<div id="div_top_hypers">
<ul id="ul_top_hypers">
<li>‣ <a href="" class="a_top_hypers"> Inbox</a></li>
<li>‣ <a href="" class="a_top_hypers"> Compose</a></li>
<li>‣ <a href="" class="a_top_hypers"> Reports</a></li>
<li>‣ <a href="" class="a_top_hypers"> Preferences</a></li>
<li>‣ <a href="" class="a_top_hypers"> logout</a></li>
</ul>
</div>
Html Solutions
Solution 1 - Html
List items are normally block elements. Turn them into inline elements via the display property.
In the code you gave, you need to use a context selector to make the display: inline property apply to the list items, instead of the list itself (applying display: inline to the overall list will have no effect):
#ul_top_hypers li {
display: inline;
}
Here is the working example:
#div_top_hypers {
background-color:#eeeeee;
display:inline;
}
#ul_top_hypers li{
display: inline;
}
<div id="div_top_hypers">
<ul id="ul_top_hypers">
<li>‣ <a href="" class="a_top_hypers"> Inbox</a></li>
<li>‣ <a href="" class="a_top_hypers"> Compose</a></li>
<li>‣ <a href="" class="a_top_hypers"> Reports</a></li>
<li>‣ <a href="" class="a_top_hypers"> Preferences</a></li>
<li>‣ <a href="" class="a_top_hypers"> logout</a></li>
</ul>
</div>
Solution 2 - Html
You could also set them to float to the right.
#ul_top_hypers li {
float: right;
}
This allows them to still be block level, but will appear on the same line.
Solution 3 - Html
Set the display property to inline for the list you want this to apply to. There's a good explanation of displaying lists on A List Apart.
Solution 4 - Html
As others have mentioned, you can set the li to display:inline;, or float the li left or right. Additionally, you can also use display:flex; on the ul. In the snippet below I also added justify-content:space-around to give it more spacing.
For more information on flexbox, checkout this complete guide.
#ul_top_hypers {
display: flex;
justify-content:space-around;
list-style-type:none;
}
<div id="div_top_hypers">
<ul id="ul_top_hypers">
<li>‣ <a href="" class="a_top_hypers"> Inbox</a></li>
<li>‣ <a href="" class="a_top_hypers"> Compose</a></li>
<li>‣ <a href="" class="a_top_hypers"> Reports</a></li>
<li>‣ <a href="" class="a_top_hypers"> Preferences</a></li>
<li>‣ <a href="" class="a_top_hypers"> logout</a></li>
</ul>
</div>
Solution 5 - Html
As @alex said, you could float it right, but if you wanted to keep the markup the same, float it to the left!
#ul_top_hypers li {
float: left;
}
Solution 6 - Html
It will work for you:
#ul_top_hypers li {
display: inline-block;
}
Solution 7 - Html
#ul_top_hypers li {
display: flex;
}
Solution 8 - Html
If you want to align list items(li) horizontally without affecting list style use below mentioned properties.
ul{ display:flex; gap:30px; }
gap:30px this used to set the gap between the list items.