如何控制select标签的宽度？
如何控制select标签的宽度？
提问于 2012-05-20 15:32:23
我有一个国家的列表，其中一些国家的名字很长：
<select name=countries>
<option value=af>Afghanistan</option>
<option value=ax>Åland Islands</option>
...
<option value=gs>South Georgia and the South Sandwich Islands</option>
...
</select>默认情况下，选择框的长度与列表中最长的选项一样长。我想创建一个选择框，使其在从宽浏览器窗口查看时显示默认行为，但在从窄浏览器窗口查看时恰好适合容器宽度的90%，小于最长选项的长度。
我试过min-width: 90%;，但它不起作用。单靠CSS样式能做到这一点吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-05-20 15:42:39
使用style="max-width:90%;"
<select name=countries style="max-width:90%;">
<option value=af>Afghanistan</option>
<option value=ax>Åland Islands</option>
...
<option value=gs>South Georgia and the South Sandwich Islands</option>
...
</select> Stack Overflow用户
发布于 2012-05-20 15:56:24
你只是把它弄反了。指定最小宽度将使选择菜单始终至少为该宽度，因此无论窗口大小是什么，它都将继续扩展到90%，也至少是其最长选项的大小。
您需要改用max-width。这样，它将允许选择菜单扩展到其最长选项，但如果扩展超过您设置的最大宽度90%，则将其压缩到该宽度。
Stack Overflow用户
发布于 2017-11-15 22:00:37
添加div包装器
<div id=myForm>
<select name=countries>
<option value=af>Afghanistan</option>
<option value=ax>Åland Islands</option>
...
<option value=gs>South Georgia and the South Sandwich Islands</option>
...
</select>
</div>然后编写CSS
#myForm select {
width:200px; }
#myForm select:focus {
width:auto; }希望这能有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10671614
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号