How to make a ul display in a horizontal row with CSS?

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>&#8227; <a href="" class="a_top_hypers"> Inbox</a></li>
  <li>&#8227; <a href="" class="a_top_hypers"> Compose</a></li>
  <li>&#8227; <a href="" class="a_top_hypers"> Reports</a></li>
  <li>&#8227; <a href="" class="a_top_hypers"> Preferences</a></li>
  <li>&#8227; <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.