Question

我有一个多选输入，在select元素上设置了最小宽度。这些选项不占用Internet Explorer 9中可用选择框的整个宽度。

这些项目占据了Chrome和Firefox的全部宽度。如何使选项元素占据选择输入的整个宽度？

请注意Internet Explorer中的Saab项：

Example

<select style="min-width: 150px; width: auto;" name="cars" multiple>
  <option value="volvo" style="width: 100%;">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

它在Chrome中正常运行：

enter image description here

Answer 1

据我所知，你不能在IE中给OPTION一个块布局。它只会扩展到其内容的宽度，我不相信你可以摆弄它的宽度。正如您所演示的那样，您可以毫无问题地调整SELECT元素的宽度。

Answer 2

我以一种奇怪的方式对它进行了测试，它不理解你选择的自动宽度 - 但如果你只是将它设置为一个像素大小，你将得到一个全宽标记：

See it here FIDDLE

代码：

<form action="form_action.asp">
<select style="min-width: 150px; width: 1px;" name="cars" multiple>
  <option value="volvo" style="width: 100%;">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
<input type="submit">
</form>

Answer 3

我最终为select和option设置了css width属性为100％，然后选择项填满了整个宽度：

Demo Fiddle

<body>
<form action="form_action.asp">
<select style="min-width: 150px; width: 100%;" name="cars" multiple>
  <option value="volvo" style="width: 100%;">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
</form>
</body>

Internet Explorer 9上的多个选择选项未占用该框的整个宽度

3 个答案: