如何控制select标签的宽度？

Question

我有一份国家名单,其中一些名字很长:

<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样式单独完成吗？

Answer 1

使用 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>  

现场演示

Answer 2

你只是倒退了.指定最小宽度将使选择菜单始终至少为该宽度,因此无论窗口大小如何,它都将继续扩展到90%,也至少是其最长选项的大小.

你需要max-width改用.这样,它会让选择菜单扩展到最长的选项,但如果它扩展超过您设置的最大宽度为90%,则将其缩小到该宽度.