How to make a
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>

score 176 · Accepted Answer · edited Dec 27 '18 at 22:31

176

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>

edited Dec 27 '18 at 22:31

Om Sao

7,064
2
47
61

answered May 20 '09 at 00:37

hbw

15,560
6
51
58

3

I've also achieved this effect by using float, thereby keeping the block nature of the list items. – Joel May 20 '09 at 00:50
1

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. – hbw May 20 '09 at 00:53
1

@htw: You could kick it back into gear with any of the clearfix solutions. – alex May 20 '09 at 01:02
3

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). – James B May 20 '09 at 01:04
where is flexbox of doing that ? like >> flex-direction: row; – mercury Dec 13 '20 at 18:39

score 21 · Answer 2 · edited Oct 24 '16 at 03:38

21

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.

edited Oct 24 '16 at 03:38

Nisse Engström

4,738
23
27
42

answered May 20 '09 at 01:01

alex

479,566
201
878
984

3

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. – Matthew James Taylor May 25 '09 at 05:17
Ah yes, they'll need to be reversed in the markup (so much for separation of layout/markup!) – alex May 25 '09 at 05:19

score 15 · Answer 3 · edited Sep 15 '21 at 14:04

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>

score 12 · Answer 4 · answered May 20 '09 at 00:40

12

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.

answered May 20 '09 at 00:40

Paul Morie

15,528
9
52
57

score 10 · Answer 5 · edited Oct 24 '16 at 03:39

10

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

edited Oct 24 '16 at 03:39

Nisse Engström

4,738
23
27
42

answered Jun 18 '13 at 14:41

tjhorner

351
2
16

score 9 · Answer 6 · edited Oct 24 '16 at 03:35

9

It will work for you:

#ul_top_hypers li {
    display: inline-block;
}

edited Oct 24 '16 at 03:35

Nisse Engström

4,738
23
27
42

answered Oct 21 '16 at 12:11

vikram mohod

109
1
6

score 5 · Answer 7 · edited Jun 14 '17 at 12:51

5

#ul_top_hypers li {
  display: flex;
}

edited Jun 14 '17 at 12:51

Badacadabra

8,043
7
28
49

answered Jun 14 '17 at 05:42

Kumar Saket

93
2
8

score 1 · Answer 8 · answered Feb 27 '22 at 17:23

1

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.

answered Feb 27 '22 at 17:23

Naveen s

11
1

Mildred Makori · Answer 9 · 2022-07-18T07:07:11.473

0

To be more specific use this:

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

edited Jul 18 '22 at 07:07

answered Jul 18 '22 at 07:04

Mildred Makori

1
1

How to make a
display in a horizontal row

9 Answers9

Linked

Related

How to make a display in a horizontal row

9 Answers9

Linked

Related

How to make a
display in a horizontal row