html - 如何控制选择标签的宽度？

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% 宽度，请将其压缩到该宽度。

Answer 3

添加 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; }

希望这会有所帮助。