CODEWITHSUNDEEP
htmlcssmenupositioninghorizontallist
M. A. Kishawy
M. A. Kishawy

Reputation: 5079

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

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?

Upvotes: 45

Views: 189210

Answers (4)

Niraj Motiani
Niraj Motiani

Reputation: 71

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>

Upvotes: 1

Tushar
Tushar

Reputation: 4418

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>

Upvotes: 23

Ravi Vanapalli
Ravi Vanapalli

Reputation: 9950

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>

Upvotes: 74

roman
roman

Reputation: 11278

quite simple: 

ul.yourlist li { float:left; }

or

ul.yourlist li { display:inline; }

Upvotes: 13

Related Questions