如何控制 HTML 選擇下拉選項的寬度？

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中文網其他相關文章！