Bagaimanakah Saya Boleh Mengehadkan Lebar Elemen Jatuh Turun dalam Menu Pilih HTML?

Teknik untuk Mengehadkan Lebar Elemen Jatuh Turun dalam Menu Pilih HTML

Apabila bekerja dengan pilihan lungsur turun pilih HTML, terutamanya yang mengandungi teks yang meluas, adalah penting untuk mengawal lebar untuk menghalangnya daripada melangkaui sempadan skrin.

Penyelesaian CSS

Untuk memastikan konsistensi merentas semua penyemak imbas, seseorang boleh menentukan lebar elemen pilihan dan pilihan. Walau bagaimanapun, pendekatan ini mungkin tidak memenuhi nilai pilihan panjang dalam penyemak imbas seperti Chrome.

Bekas Div dan Tetapan Lebar Dinamik

Penyelesaian optimum melibatkan membenamkan elemen pilih dalam bekas div dengan lebar tetap dan menggunakan tetapan lebar automatik pada teg pilih itu sendiri. Kebanyakan penyemak imbas mengandungi lungsur turun dalam div sambil mengembangkannya untuk paparan nilai pilihan penuh apabila diklik.

Contoh Kod

HTML:

<code class="html"><div class="dropdown_container">
  <select class="my_dropdown" id="my_dropdown">
    <option value="1">LONG OPTION</option>
    <option value="2">short</option>
  </select>
</div></code>

CSS:

<code class="css">div.dropdown_container {
    width:10px;
}

select.my_dropdown {
    width:auto;
}

/*IE FIX */
select#my_dropdown {
    width:100%;
}

select:focus#my_dropdown {
    width:auto;
}</code>

Keserasian IE

Internet Explorer memerlukan pembetulan tambahan untuk mencapai gelagat yang diingini. Kod CSS di atas menangani isu ini dengan menetapkan lebar khusus untuk elemen pilihan dan melaraskannya secara dinamik apabila difokuskan.

Kesimpulan

Dengan menggabungkan pendekatan bekas div dengan tetapan lebar dinamik, seseorang boleh dengan berkesan mengawal lebar elemen lungsur turun dalam pilihan pilih HTML, memastikan pengalaman pengguna yang lancar merentas pelbagai penyemak imbas.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengehadkan Lebar Elemen Jatuh Turun dalam Menu Pilih HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!