CSS - 为选择框设置最大宽度

Question

我有一个表单，其中包含一个场馆下拉列表和一个提交按钮。它们应该在同一行上，但由于场馆列表是动态的，可能会变得太长并将按钮推下。

我想设置选择器的最大宽度属性，但我不确定这是否适用于所有浏览器。你有什么关于解决此问题的建议吗？

<form action="http://localhost/ci-llmg/index.php/welcome/searchVenueForm" method="post"     class="searchform">
    <select name="venue"> 
        <option value="0" selected="selected">Select venue...</option> 
        <option value="1">venue 0</option> 
        <option value="2">club 1</option> 
        <option value="3">disco 2</option> 
        <option value="4">future test venue</option> 
    </select>
    <input type="submit" name="" value="Show venue!" class="submitButton"  />
</form>

CSS：

.searchform select {
max-width: 320px;
}

.searchform input.submitButton {
float: right;
}

- Patrick

---

这回答解决了你的问题吗？如何使选择元素在fieldset内缩小到最大宽度百分比样式？ - vsync

Answer 1

如果场馆是在服务器端生成的，您可以使用服务器端脚本将它们裁剪到特定的最大字符数。当使用纯CSS时，我建议在和元素上都设置overflow:hidden。还可以尝试在option元素上设置max-width。当所有非IE浏览器都能正常工作时，您可以使用通常的脚本为IE添加max-width支持。

- chiborg

---

也许你是对的，最好的解决方案是使用 PHP 进行切割。谢谢。 - Patrick

Answer 2

尝试：

fieldset select {
  width: auto;
}

- kmchen