css - 为选择设置最大宽度

Question

我有一个带有场地下拉列表和提交按钮的表单。 他们应该在同一条线上，但由于场地列表是动态的，它可能会变得太长并按下按钮。

我正在考虑为选择设置一个 max-width 属性，但我不清楚这是否适用于所有浏览器。您对解决方法有什么建议吗？

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

Answer 1

尝试：

fieldset select {
  width: auto;
}

Answer 2

如果场地是在服务器端生成的，您可以使用服务器端脚本将它们减少到特定的最大字符数。

当使用纯 CSS 时，我还会尝试在 select 和 option 元素上设置 overflow:hidden。还可以尝试在选项元素上设置max-width。当它适用于所有非 IE 时，您可以使用常用脚本为 IE 添加最大宽度支持。