css - 为选择设置最大宽度

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/2591796/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 21:52:21  来源:igfitidea点击:

css - set max-width for select

css

提问by Patrick

I have a form with a drop down list of venues and a submit button. They are supposed to be on the same line, but since the list of venues is dynamic, it could become too long and push the button down.

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

I was thinking of setting a max-width property to the select, but I'm not clear whether this will work in all browsers. Do you have any suggestions on a workaround?

我正在考虑为 select 设置一个 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:

css:

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

.searchform input.submitButton {
float: right;
}

采纳答案by chiborg

If the venues are generated on the server side, you can use your server-side scripting to cut them down to a specific maximum character count.

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

When using pure CSS I'd also try setting overflow:hidden, both on the selectand the optionelements. Also try setting max-widthon the option element. When it works in all non-IE, you can use the usual scripts to add max-width support for IE.

使用纯 CSS 时,我还会尝试overflow:hiddenselectoption元素上设置。还可以尝试max-width在选项元素上设置。当它适用于所有非 IE 时,您可以使用常用脚本为 IE 添加 max-width 支持。

回答by kmchen

try:

尝试:

fieldset select {
  width: auto;
}