Make ul elements appear in a horizontal row.

Question

How can I make a ul list's item appears horizontally in a row using CSS?

here is code

<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">  Perefrences</a></li>
                <li>&#8227; <a href="" class="a_top_hypers">  logout</a></li>
            </ul>
        </div>

--

#div_top_hypers{
    background-color:#eeeeee;
        display:inline;

}
#ul_top_hypers{

  display: inline;




}

Answer 1

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

Answer 2

Set the display property to inline for the list you want this to apply to. There's a good explanation of displaying lists on A List Apart.

Answer 3

You could also set them to float to the right.

#ul_top_hypers li {
    float: right;
}

This allows them to still be block level, but will appear on the same line.