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％，小于最长选项的长度。 / p>

我尝试了min-width: 90%;，但它没有用。这可以通过CSS样式单独完成吗？

Answer 1

USE 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>

LIVE DEMO

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

希望这会有所帮助。

如何控制select标签的宽度？

3 个答案: