Mengapa `lebar: auto` Tidak Berfungsi seperti yang Dijangkakan untuk Elemen ``?

lebar:auto untuk Medan

Dalam CSS, width:auto untuk elemen peringkat blok secara amnya bermakna lebar akan mengembang untuk memenuhi ruang yang tersedia. Walau bagaimanapun, tingkah laku ini tidak berlaku untuk elemen.

Apakah yang Dilakukan width:auto untuk s?

Atribut saiz lalai bagi elemen menentukan lebar awalnya. width:auto hanya menetapkan lebar kepada saiz lalai.

Mencapai Gelagat Yang Diingini

Untuk memaksa untuk menduduki 100% daripada lebar yang tersedia, gunakan width:100% dan bukannya width:auto. Walau bagaimanapun, ini mungkin menghadapi ketidakkonsistenan disebabkan oleh variasi penyemak imbas dalam pemaparan sempadan.

Pendekatan Alternatif

Kaedah lain untuk mengisi lebar yang tersedia untuk s ialah dengan mengalih keluar atribut saiz dan nyatakan:

<code class="css">input {
  width: 100%;
  margin: -3px;
  border: 2px inset #eee;
}</code>

Pendekatan ini menghapuskan lebar lalai dan menyediakan gelagat yang konsisten merentas penyemak imbas. Ia menolak 3 piksel daripada jidar untuk mengimbangi lebar dan inden sempadan.

Atas ialah kandungan terperinci Mengapa `lebar: auto` Tidak Berfungsi seperti yang Dijangkakan untuk Elemen ``?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!