CODEWITHSUNDEEP
htmlcsshtml-lists
Babiker
Babiker

Reputation: 18798

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

Upvotes: 139

Views: 423693

Answers (9)

Mildred Makori
Mildred Makori

Reputation: 1

To be more specific use this:

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

Upvotes: 0

Naveen s
Naveen s

Reputation: 21

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.

Upvotes: 2

Matthew Johnson
Matthew Johnson

Reputation: 5155

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>

Upvotes: 20

hbw
hbw

Reputation: 15750

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>

Upvotes: 187

Kumar Saket
Kumar Saket

Reputation: 93

#ul_top_hypers li {
  display: flex;
}

Upvotes: 5

tjhorner
tjhorner

Reputation: 350

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

Upvotes: 10

alex
alex

Reputation: 490153

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.

Upvotes: 21

vikram mohod
vikram mohod

Reputation: 119

It will work for you:

#ul_top_hypers li {
    display: inline-block;
}

Upvotes: 10

Paul Morie
Paul Morie

Reputation: 15778

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.

Upvotes: 12

Related Questions