亚洲视频二区_亚洲欧洲日本天天堂在线观看_日韩一区二区在线观看_中文字幕不卡一区

如何使 html 中的 ul 橫向排列：通過添加 float: left 樣式使列表項浮動到左側。為每個列表項設置寬度以控制其水平排列。使用 margin 屬性消除列表項之間的間隙。

如何使 HTML 中的 UL 橫向排列

在 HTML 中，默認情況下，無序列表 (UL) 會縱向排列其項目。但是，可以通過使用 CSS 樣式來實現橫向排列。

步驟：

應用浮動：

添加 CSS 樣式 float: left 以使列表項浮動到左側。

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

登錄后復制

消除間隙：

列表項之間可能會出現間隙。使用 margin 屬性消除這些間隙。

<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 像素，并且沒有間隙。