如何控制选择标签的宽度？ [英] How to control the width of select tag?

问题描述

我有一个国家/地区清单，有些名称很长：

 < select name = countries> 
< option value = af>阿富汗< / option> 
< option value = ax>ÅlandIslands< / option> 
 ... 
< option value = gs>南乔治亚岛和南桑威奇群岛< / option> 
 ... 
< / select> 
  

默认情况下，选择框将与列表中最长的选项一样长。我想创建一个选择框，使其展示从宽的浏览器窗口查看时的默认行为，但从窄的浏览器窗口中查看时，适合容器宽度的90％，小于最长选项的长度。 / p>

我尝试了 min-width：90％; ，但它没有工作。 c> style =max-width：90％ ;

 < select name = countries style =max-width：90％ > 
< option value = af>阿富汗< / option> 
< option value = ax>ÅlandIslands< / option> 
 ... 
< option value = gs>南乔治亚岛和南桑威奇群岛< / option> 
 ... 
< / select> 
  

LIVE DEMO

I have a list of countries, some with a very long name:

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

By default, the select box would be as long as the longest option in the list. I want to create a select box such that it exhibits the default behaviour when viewed from a wide browser window, but fit in nicely to 90% of container width when viewed from a narrow browser window, smaller than the length of the longest option.

I tried min-width: 90%;, but it didn't work. Can this be done by CSS styling alone?

解决方案

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

这篇关于如何控制选择标签的宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！