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

【问题标题】：How to make a HTML list appear horizontally instead of vertically using CSS only?如何仅使用 CSS 使 HTML 列表水平显示而不是垂直显示？
【发布时间】：2011-01-09 20:27:11
【问题描述】：

我需要这个，因为我想让一个菜单（由 HTML 列表组成）水平显示。

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

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

【问题讨论】：

标签： html css menu positioning horizontallist

【解决方案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>

【讨论】：

会 (display:inline;) 删除子列表的缩进吗？
没有。为此，您需要#menu li li{margin-left: 0; padding-left: 0;}
就像一个魅力必须为我的用例稍微调整它，但一个可靠的答案。

【解决方案2】：

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

【讨论】：

【解决方案3】：

很简单：

ul.yourlist li { float:left; }

或

ul.yourlist li { display:inline; }

【讨论】：

【解决方案4】：

你可以直接使用类似这样的内联样式

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

【讨论】：