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