Bagaimanakah saya boleh membuat medan `` mengisi ruang yang tersedia menggunakan \"lebar: auto\" dalam CSS?

Lebar:auto untuk Medan

Pemula CSS sering menghadapi kekeliruan apabila menggunakan sifat "width:auto" untuk memaparkan:sekat elemen seperti medan, kerana ia mungkin tidak berkelakuan seperti yang diharapkan.

Definisi Lebar Auto:

Spesifikasi CSS kekal samar-samar tentang takrifan tepat "width:auto," meninggalkan ruang untuk kekeliruan. Walau bagaimanapun, secara amnya, ini bermakna lebar elemen akan melaraskan secara automatik untuk menampung kandungannya.

Mencapai Gelagat Yang Dijangka untuk Medan:

Untuk membuat medan mengisi ruang yang ada seperti elemen peringkat blok lain, langkah berikut boleh diambil:

1. Ganti Saiz Lalai:

Atribut saiz lalai untuk medan menjana lebarnya. Untuk mengatasi ini, "width:100%" boleh digunakan. Ini menetapkan lebar untuk merentangi keseluruhan ruang elemen induk yang tersedia.

2. Alih Keluar Isu Sempadan Khusus Penyemak Imbas:

Malangnya, penyemak imbas mengendalikan sempadan secara berbeza sedikit, menyebabkan ketidakkonsistenan. Untuk menangani perkara ini, CSS tambahan boleh digunakan:

• Gunakan margin negatif untuk mengatasi pengendalian sempadan khusus penyemak imbas.
• Gunakan sempadan inset untuk mengelakkan lagi ketidakkonsistenan.

Kod Contoh:

Kod berikut menunjukkan cara mengisi ruang yang tersedia dengan medan semasa mengatasi isu sempadan khusus penyemak imbas:

<div style="padding:30px;width:200px;background:red">
  <form action="" method="post" style="width:200px;background:blue;padding:3px">
    <input size="" style="width:100%;margin:-3px;border:2px inset #eee" />
    <br /><br />
    <input size="" style="width:100%" />
  </form>
</div>

Perlu diingat bahawa kod ini mungkin tidak sempurna dalam semua penyemak imbas. Walau bagaimanapun, ia memberikan anggaran hampir kelakuan yang diingini dan menangani kemungkinan ketidakkonsistenan merentas penyemak imbas.

Atas ialah kandungan terperinci Bagaimanakah saya boleh membuat medan `` mengisi ruang yang tersedia menggunakan \"lebar: auto\" dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!