Bagaimana untuk Meregangkan `` Tag untuk Mengisi Keseluruhan Lebar ``?-tutorial css-php.cn

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

Susan Sarandon

Lepaskan： 2024-10-26 16:30:03

asal

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