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?

Answer 1

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>

Answer 2

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>