如何使HTML列表水平显示而不是仅垂直使用CSS？

Question

我需要这个,因为我想让菜单(由HTML列表制作)水平显示.

我不喜欢使用绝对定位,因为当我开始更改页面布局时它可能会变得混乱.

我还想删除子列表的缩进.可能吗？

Answer 1

你将不得不使用类似下面的东西

#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

非常简单:

ul.yourlist li { float:left; }

要么

ul.yourlist li { display:inline; }

Answer 3

运用 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>

运用 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>