How to make a HTML list appear horizontally instead of vertically using CSS only?

Question

I need this because I want to make a menu (which is made from a HTML list) appear horizontally.

I prefer not to use absolute positioning since it might become messy when I start changing the layout of the page.

I would like also to remove the indenting of the sub-lists. Is it possible?

Afnan Ahmad · Accepted Answer · 2017-01-21 06:21:43Z

75

You will have to use something like below

#menu ul{
  list-style: none;
}
#menu li{
  display: inline;
}

<div id="menu">
  <ul>
    <li>First menu item</li>
    <li>Second menu item</li>
    <li>Third menu item</li>
  </ul>
</div>

edited Jan 21, 2017 at 6:21

Afnan Ahmad

2,5424 gold badges28 silver badges46 bronze badges

answered Jan 27, 2010 at 7:38

Ravi Vanapalli

9,9703 gold badges36 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

M. A. Kishawy Over a year ago

Will (display:inline;) remove the indenting for the sub-lists?

Paul D. Waite Over a year ago

No. For that, you want #menu li li{margin-left: 0; padding-left: 0;}

Callat Over a year ago

Like a charm had to tweak it a bit for my use-case but a solid answer.

Tushar · Accepted Answer · 2018-07-26 07:00:19Z

23

Using display: inline-flex

#menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex
}

<div id="menu">
  <ul>
    <li>1 menu item</li>
    <li>2 menu item</li>
    <li>3 menu item</li>
  </ul>
</div>

Using display: inline-block

#menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#menu li {
  display: inline-block;
}

<div id="menu">
  <ul>
    <li>1 menu item</li>
    <li>2 menu item</li>
    <li>3 menu item</li>
  </ul>
</div>

edited Jul 26, 2018 at 7:00

answered Jun 23, 2014 at 7:13

Tushar

4,4165 gold badges26 silver badges39 bronze badges

Comments

roman · Accepted Answer · 2010-01-27 07:31:32Z

13

quite simple:

ul.yourlist li { float:left; }

or

ul.yourlist li { display:inline; }

answered Jan 27, 2010 at 7:31

roman

11.3k1 gold badge33 silver badges42 bronze badges

Comments

Niraj Motiani · Accepted Answer · 2021-05-18 22:10:02Z

1

You can directly use inline styling something like this

<ul style="list-style: none; margin: 0; padding: 0;">
  <li style="display: inline">A</li>
  <li style="display: inline">B</li>
  <li style="display: inline">C</li>
  <li style="display: inline">D</li>
</ul>

answered May 18, 2021 at 22:10

Niraj Motiani

711 silver badge9 bronze badges

Collectives™ on Stack Overflow

How to make a HTML list appear horizontally instead of vertically using CSS only?

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related