How to make a display in a horizontal row

Question

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

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

Here is the working example:

#div_top_hypers {
    background-color:#eeeeee;
    display:inline;      
}
#ul_top_hypers li{
    display: inline;
}

    

        
‣  Inbox
        
‣  Compose
        
‣  Reports
        
‣  Preferences
        
‣  logout