Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Meregangkan Tag Sauh untuk Mengisi Keseluruhan Ruang Item Senarai?

Bagaimana untuk Meregangkan Tag Sauh untuk Mengisi Keseluruhan Ruang Item Senarai?

DDD
Lepaskan: 2024-10-26 04:07:28
asal
1022 orang telah melayarinya

How to Stretch Anchor Tags to Fill the Entire Space of a List Item?

Penyelesaian untuk Meregangkan Teg Sauh

Untuk membuat teg sauh () mengisi seluruh ruang dalam item senarai (

  • ), adalah perlu untuk mengatasi sifat sebaris lalai bagi tag anchor. Unsur sebaris, seperti , biasanya tidak mempunyai lebar atau ketinggian tetap.

    Sifat bermasalah unsur sebaris timbul daripada penggunaannya untuk teks mengalir. Memandangkan ketidakpastian pembalut garisan, menetapkan lebar tetap untuk elemen sebaris tidak masuk akal.

    Untuk mendayakan kawalan lebar untuk tag anchor, adalah penting untuk menukar sifat paparannya. Dua pilihan yang sah wujud:

    Pilihan Harta Paparan:

    • Sekat: Pilihan ini menukar teg sauh menjadi elemen peringkat blok .
    • Contoh Kod:

    Untuk menggunakan ciri paparan blok atau blok sebaris, gunakan CSS seperti yang ditunjukkan di bawah:

    Pelaksanaan HTML:

    <code class="css">a.wide {
        display: block;
    }
    
    a.wide-inline {
        display: inline-block;
    }</code>
    Salin selepas log masuk

    Masukkan sifat paparan yang diubah suai ke dalam kod HTML anda.

    Nota:

    <code class="html"><ul id="menu">
      <li><a class="wide" href="javascript:;">Home</a></li>
      <li><a class="wide-inline" href="javascript:;">Test</a></li>
    </ul></code>
    Salin selepas log masuk

    Sementara itu adalah mungkin untuk menetapkan lebar elemen sebaris dalam IE6, tingkah laku ini dianggap pelaksanaan CSS yang salah.

    Atas ialah kandungan terperinci Bagaimana untuk Meregangkan Tag Sauh untuk Mengisi Keseluruhan Ruang Item Senarai?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

  • 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