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?
This question is related to
html
css
menu
positioning
horizontallist
You will have to use something like below
#menu ul{_x000D_
list-style: none;_x000D_
}_x000D_
#menu li{_x000D_
display: inline;_x000D_
}_x000D_
<div id="menu">_x000D_
<ul>_x000D_
<li>First menu item</li>_x000D_
<li>Second menu item</li>_x000D_
<li>Third menu item</li>_x000D_
</ul>_x000D_
</div>Using display: inline-flex
#menu ul {_x000D_
list-style: none;_x000D_
margin: 0;_x000D_
padding: 0;_x000D_
display: inline-flex_x000D_
}<div id="menu">_x000D_
<ul>_x000D_
<li>1 menu item</li>_x000D_
<li>2 menu item</li>_x000D_
<li>3 menu item</li>_x000D_
</ul>_x000D_
</div>Using display: inline-block
#menu ul {_x000D_
list-style: none;_x000D_
margin: 0;_x000D_
padding: 0;_x000D_
}_x000D_
_x000D_
#menu li {_x000D_
display: inline-block;_x000D_
}<div id="menu">_x000D_
<ul>_x000D_
<li>1 menu item</li>_x000D_
<li>2 menu item</li>_x000D_
<li>3 menu item</li>_x000D_
</ul>_x000D_
</div>quite simple:
ul.yourlist li { float:left; }
or
ul.yourlist li { display:inline; }
Source: Stackoverflow.com