Rumah > hujung hadapan web > html tutorial > Bagaimana untuk mengatur ul secara mendatar dalam html

Bagaimana untuk mengatur ul secara mendatar dalam html

下次还敢
Lepaskan: 2024-04-27 19:58:09
asal
816 orang telah melayarinya

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.

Bagaimana untuk mengatur ul secara mendatar dalam html

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>
Salin selepas log masuk
  1. 设置宽度:

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

<code class="css">li {
  width: 150px; /* 设置列表项的宽度 */
}</code>
Salin selepas log masuk
  1. 消除间隙:

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

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

      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>
      Salin selepas log masuk
        🎜🎜🎜 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>
        Salin selepas log masuk
        🎜🎜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!

    Label berkaitan:
    sumber:php.cn
    Kenyataan Laman Web ini
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
    Tutorial Popular
    Lagi>
    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan