Bagaimanakah saya boleh mendapatkan elemen `` untuk mengisi ruang yang tersedia dengan `lebar: auto`?

Apakah yang dimaksudkan dengan lebar: auto Maksud untuk <input> Elemen?

Walaupun pemahaman umumnya sebagai arahan untuk mengisi ruang yang tersedia untuk elemen blok, lebar: auto berkelakuan berbeza untuk <input> medan.

Takrifan lebar: auto

Spesifikasi CSS tidak mentakrifkan secara eksplisit tingkah laku lebar tertentu: auto untuk <input> elemen. Walau bagaimanapun, ia secara amnya menandakan bahawa penyemak imbas harus mengira lebar berdasarkan sifat intrinsik elemen.

Mencapai Gelagat Diingini untuk Medan Input

Untuk mencapai gelagat pengisian yang diharapkan ruang yang tersedia untuk <input> medan:

• Lebar cuba: 100%: Ini menetapkan lebar kepada ruang yang tinggal dalam bekas, serupa dengan gelagat elemen peringkat blok lain.

Jika lebar: 100% Gagal:

Ia mungkin disebabkan oleh atribut saiz lalai, yang mentakrifkan saiz kawasan input. Untuk mengatasi ini, alih keluar atribut saiz atau tetapkannya kepada rentetan kosong (cth., size="").

Contoh dengan lebar: 100%:

<code class="html">&lt;form style=&quot;width: 200px; background: khaki&quot;&gt;
  &lt;input style=&quot;width: 100%&quot; /&gt;
&lt;/form&gt;</code>

Penyelesaian Separa dengan Jidar dan Sempadan:

Untuk penyelesaian yang lebih tepat, tambahkan jidar negatif dan sisipan sempadan pada medan input, seperti yang dilihat dalam kod ini:

<code class="html">&lt;div style=&quot;padding: 30px; width: 200px; background: red&quot;&gt;
  &lt;form style=&quot;width: 200px; background: blue; padding: 3px&quot;&gt;
    &lt;input style=&quot;width: 100%; margin: -3px; border: 2px inset #eee&quot; /&gt;
  &lt;/form&gt;
&lt;/div&gt;</code>

Atas ialah kandungan terperinci Bagaimanakah saya boleh mendapatkan elemen `` untuk mengisi ruang yang tersedia dengan `lebar: auto`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!