Babiker Babiker - 2 years ago 93
HTML Question

How to make a <ul> display in a horizontal row

How can I make my list items appear horizontally in a row using CSS?

#div_top_hypers {
#ul_top_hypers {
display: inline;

<div id="div_top_hypers">
<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>

hbw hbw
Answer Source

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;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download