5

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

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

请注意SaabInternet Explorer 中的项目：

例子

这个小提琴演示了这个问题

<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 中正常工作：

在此处输入图像描述

4

3 回答 3

2

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

于 2013-06-03T19:13:48.420 回答
2

我以某种奇怪的方式对其进行了测试，它不理解您在选择时的自动宽度 - 但如果您将其设置为像素大小，您将在其上获得全宽标记：

在这里看到它

编码：

<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>
于 2013-06-04T05:38:01.787 回答
2

我最终将选择和选项的 css 宽度属性设置为 100%，然后选择项填满了整个宽度：

演示小提琴

<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>
于 2013-06-04T13:40:17.153 回答