Babiker Babiker - 6 months ago 9
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 {
background-color:#eeeeee;
display:inline;
}
#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>
</ul>
</div>




hbw hbw
Answer

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;
}