How to make a <ul> display in a horizontal row

Question

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>

Deadhead

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

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

Suellen

I've also achieved this effect by using float, thereby keeping the block nature of the list items. – Newel

That's an interesting approach, I have to say—however, I think that would create some unnecessary hassles with margins and such, since you're effectively lifting the list items out of the box model. – Suellen

@htw: You could kick it back into gear with any of the clearfix solutions. – Fumble

You could always use display:inline-block if you wanted to retain the block nature... though it's not completely supported at this stage (I believe it's Fx2 that's the major culprit). – Schadenfreude

where is flexbox of doing that ? like >> flex-direction: row; – Keeney

Answer 2

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.

Fumble

Floating them right will have an extra affect: it will swap the order of them so from left to right they will be last to first. – Barony

Ah yes, they'll need to be reversed in the markup (so much for separation of layout/markup!) – Fumble

Answer 3

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.

#ul_top_hypers {
    display: flex;
    justify-content:space-around;
    list-style-type:none;
}

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

Acree

Answer 4

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.

Tape

Answer 5

As @alex said, you could float it right, but if you wanted to keep the markup the same, float it to the left!

#ul_top_hypers li {
    float: left;
}

Wendall

Answer 6

It will work for you:

#ul_top_hypers li {
    display: inline-block;
}

Collectivism

Answer 7

#ul_top_hypers li {
  display: flex;
}

Allude

Answer 8

If you want to align list items(li) horizontally without affecting list style use below mentioned properties. ul{ display:flex; gap:30px; } gap:30px this used to set the gap between the list items.

Phrase

Answer 9

To be more specific use this:

#div_top_hypers ul#ul_top_hypers li{
display: inline;
}

Yeorgi