Bagaimana untuk Meregangkan `` Tag untuk Mengisi Keseluruhan Lebar ``?

Susan Sarandon
Lepaskan: 2024-10-26 16:30:03
asal
906 orang telah melayarinya

How to Stretch `` Tags to Fill the Entire `` Width?

Regangan Teg untuk Mengisi Keseluruhan

  • Dalam bidang HTML,

  • elemen berfungsi sebagai bekas untuk item senarai. Selalunya, pereka berusaha untuk meningkatkan estetika item ini dengan meregangkan tag di dalamnya untuk merangkumi keseluruhan lebar
  • . Malangnya, percubaan mudah untuk mencapai ini menggunakan sifat CSS seperti lebar: 100%; ketinggian: 100% terbukti sia-sia.

    Sebab asas di sebalik kesusahan ini terletak pada sifat tag sebagai elemen sebaris. Elemen sebaris, tidak seperti rakan blok mereka, tidak mempunyai keupayaan yang wujud untuk mengawal lebarnya. Falsafah reka bentuk ini berpunca daripada fungsi utamanya mewakili kandungan teks mengalir yang mungkin menjangkau berbilang baris.

    Untuk memintas pengehadan ini dan memberikan tingkah laku yang diingini pada tag, perubahan yang halus namun memberi kesan diperlukan. Dengan mengubah sifat paparan kepada menyekat atau menyekat sebaris, teg secara berkesan berubah menjadi elemen seperti blok, mewarisi keupayaan kawalan lebar rakan bloknya.

    Dalam amalan, transformasi ini memerlukan penambahan kelas CSS yang sepadan pada teg dan tetapkan sifat paparannya dengan sewajarnya:

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

    Sekarang, apabila kelas ini digunakan pada teg dalam

  • elemen, ia akan meregang dengan anggun untuk mengisi ruang mendatar yang tersedia, melengkapkan kesan yang diingini.

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

    Atas ialah kandungan terperinci Bagaimana untuk Meregangkan `` Tag untuk Mengisi Keseluruhan Lebar ``?. 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
    Artikel terbaru oleh pengarang
    Tutorial Popular
    Lagi>
    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan