Babiker Babiker - 5 months ago 6
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

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;