HTML 選擇下拉選項的有效寬度管理
當下拉寬度超出螢幕邊界時，用冗長的選項填充選擇框會帶來挑戰。手動設定選擇框的寬度通常無法限制下拉式選單的寬度。
解決方案是將選擇框封裝在固定寬度的 div 容器中。透過將 div 的寬度和 select 標籤的寬度設為“auto”，大多數瀏覽器將在 div 中包含下拉清單。但是，按一下後，下拉清單將展開以顯示完整選項。
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>此方法而不有效地管理下拉寬度影響可讀性。 div 容器限制下拉清單的初始寬度，而選擇的「自動」寬度允許在點擊時無縫擴展。為了與 Internet Explorer 相容，包含的 CSS 修復可確保正確渲染。
以上是如何控制 HTML 選擇下拉選項的寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
