Bagaimana untuk Mengawal Lebar HTML Pilih Pilihan Dropdown?

Pengurusan Lebar Berkesan untuk HTML Pilih Pilihan Jatuh Turun

Mengisi kotak pilihan dengan pilihan yang panjang menimbulkan cabaran apabila lebar lungsur turun melebihi sempadan skrin . Menetapkan lebar kotak pilihan secara manual selalunya gagal untuk mengekang lebar menu lungsur turun.

Penyelesaian terletak pada merangkum kotak pilihan dalam bekas div lebar tetap. Dengan menetapkan lebar div dan lebar teg pilih kepada "auto", kebanyakan penyemak imbas akan mengandungi menu lungsur dalam div. Walau bagaimanapun, apabila diklik, menu lungsur berkembang untuk memaparkan pilihan yang lengkap.

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>

Kaedah ini menguruskan lebar lungsur turun dengan berkesan tanpa menjejaskan kebolehbacaan. Bekas div mengehadkan lebar awal lungsur turun, manakala lebar "auto" pilihan membolehkan pengembangan lancar apabila diklik. Untuk keserasian Internet Explorer, pembetulan CSS yang disertakan memastikan pemaparan yang betul.

Atas ialah kandungan terperinci Bagaimana untuk Mengawal Lebar HTML Pilih Pilihan Dropdown?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!