Bagaimana untuk mengatur ul secara mendatar dalam html

Cara membuat UL dalam HTML dijajarkan secara mendatar: Jadikan item senarai terapung ke kiri dengan menambahkan gaya apungan: kiri. Tetapkan lebar untuk setiap item senarai untuk mengawal susunan mendatarnya. Gunakan sifat margin untuk menghapuskan jurang antara item senarai.

Cara membuat UL menjajarkan secara mendatar dalam HTML

Dalam HTML, secara lalai, senarai tidak tertib (UL) menyusun itemnya secara menegak. Walau bagaimanapun, penjajaran mendatar boleh dicapai dengan menggunakan gaya CSS.

Langkah:

1. Guna apungan:

   Tambah gaya CSS float: kiri untuk menjadikan item senarai terapung ke kiri. float: left 以使列表项浮动到左侧。

<code class="css">ul {
  list-style-type: none; /* 删除默认圆点 */
  padding: 0; /* 删除默认间距 */
}

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

2. 设置宽度：

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

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

3. 消除间隙：

   列表项之间可能会出现间隙。使用 margin

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

Tetapkan Lebar:

Tetapkan lebar untuk setiap item senarai untuk mengawal susunan mendatarnya.

🎜🎜

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

🎜🎜🎜 Hilangkan jurang: 🎜🎜🎜 Jurang mungkin muncul antara item senarai. Gunakan atribut margin untuk menghapuskan jurang ini. 🎜🎜🎜

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

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

🎜🎜Contoh: 🎜🎜rrreeerrreee🎜Selepas menggunakan gaya ini, senarai tidak tertib anda akan berbaris secara mendatar dengan item senarai lebar 150 piksel dan tiada jurang. 🎜

Atas ialah kandungan terperinci Bagaimana untuk mengatur ul secara mendatar dalam html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!