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

As others have mentioned, you can set the li to display:inline;, or float the li left or right. Additionally, you can also use display:flex; on the ul. In the snippet below I also added justify-content:space-around to give it more spacing.

For more information on flexbox, checkout this complete guide.

#div_top_hypers {
    background-color:#eeeeee;
    display:inline;      
}
#ul_top_hypers {
    display: flex;
    justify-content:space-around;
    list-style-type:none;
}

    

        
‣  Inbox
        
‣  Compose
        
‣  Reports
        
‣  Preferences
        
‣  logout