Sometimes, we want to make a ul display in a horizontal row with CSS.
In this article, we’ll look at how to make a ul display in a horizontal row with CSS.
How to make a ul display in a horizontal row with CSS?
To make a ul display in a horizontal row with CSS, we make its li elements inline.
For instance, we write
<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>
to add the li elements into the ul.
Then we write
#ul_top_hypers li {
display: inline;
}
to display: inline;
to display the li elements inline, which make them display side by side.
Conclusion
To make a ul display in a horizontal row with CSS, we make its li elements inline.