如何控制 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中文网其他相关文章！