如何自訂 HTML 中下拉選項的寬度？

在HTML 中自訂下拉選項寬度

使用HTML 選擇下拉清單時，通常會遇到可能超出螢幕的冗長選項值寬度，使得清單導航變得困難。要解決此問題，請考慮實施以下技術：

選項1：使用CSS 約束下拉清單寬度

如提示中所述，您可以設定下拉式選單的寬度使用CSS 選擇元素及其選項。然而，這種方法可能不適用於所有瀏覽器，尤其是 Google Chrome。

選項2：在寬度固定的容器中嵌入下拉式選單

更可靠的解決方案涉及放置固定寬度div 容器內的下拉式選單並將「width: auto”應用於選擇標籤。這可確保下拉式選單在單擊時展開，容納完整選項值，同時將其限制在容器內。

範例程式碼：

<code class="html"><!-- 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>

<!-- 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>

其他注意事項：

• 為了確保所有瀏覽器（包括Internet Explorer）中正常運行，可能需要進行額外的CSS 修復，如提供的CSS 範例中所指定。
• 此技術可有效限制下拉式選單的寬度，允許其在容器內展開，同時保留清單的可讀性和功能。

以上是如何自訂 HTML 中下拉選項的寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！