如何使 HTML 中的 UL 横向排列

在 HTML 中，默认情况下，无序列表 (UL) 会纵向排列其项目。但是，可以通过使用 CSS 样式来实现横向排列。

步骤：

<code class="&lt;a style='color:#f60; text-decoration:underline;' href=" https: target="_blank">css"&gt;ul {
  list-style-type: none; /* 删除默认圆点 */
  padding: 0; /* 删除默认间距 */
}

li {
  float: left; /* 使列表项浮动到左侧 */
}</code>

设置宽度：

为每个列表项设置宽度以控制它们水平排列。

<code class="css">li {
  width: 150px; /* 设置列表项的宽度 */
}</code>

消除间隙：

列表项之间可能会出现间隙。使用 属性消除这些间隙。

<code class="css">li {
  margin-right: -1px; /* 消除水平间隙 */
}</code>

示例：

<code class="html"><ul>
<li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ul></code>

<code class="css">ul {
  list-style-type: none;
  padding: 0;
}

li {
  float: left;
  width: 150px;
  margin-right: -1px;
}</code>

应用这些样式后，你的无序列表将横向排列，列表项宽度为 150 像素，并且没有间隙。