如何调整 DropDown <select> 框的宽度？答案

【问题标题】：How do I adjust the width of a DropDown <select> box?如何调整 DropDown <select> 框的宽度？
【发布时间】：2010-11-27 13:02:56
【问题描述】：

我需要在不使用 css 的情况下调整选择 HTML 框的宽度，有什么办法吗？我尝试了大小，但是它正在调整高度，而宽度什么也没做？还有其他方法吗？

【问题讨论】：

您为什么要尝试控制网页的展示而不使用网络的展示语言？
表示语言是指CSS？因为我想也许我错过了一些可用的 HTML 选项。
是的。 CSS 是一种旨在描述网页（和其他标记文档）外观的语言。 HTML 旨在描述结构、语义和关系。它有一些 90 年代浏览器大战遗留下来的（大部分已被弃用的）展示性内容。
谢谢您的解释
您希望使用 javascript 来实现吗？

标签： html xhtml

【解决方案1】：

select
{
    width:  100%;
    height: 42px;
}

将此类添加到您的样式标签中。它工作正常。

【讨论】：

与 2009 年接受的答案基本相同。您刚刚添加了一个不相关的高度参数。
作为新用户，这是网站上的一些指导。请不要在没有查看现有答案并确保您的答案会带来新东西的情况下回答问题，尤其是那些答案已被接受的问题。您可能应该删除此答案。

【解决方案2】：

如果你使用 jquery，数学物理化学

这是我选择的 html 代码。所以你必须添加另一个包含 jquery 类名的 div，包括你的类名，并在你的类中应用高度和宽度。

<div class="ui-select selBox"> 
    <select>
    <option>Maths</option>
    <option>Physics</option>
    <option>Chemistry</option>
    </select>
</div>
.selBox{
 width: 470px !important;
 height: 40px !important;
}

这里 selBox 是我的类名，ui-select 是 jquery 类名。

【讨论】：

您的解决方案不包含任何 jQuery

【解决方案3】：

<style type="text/css">     
    select {
        width:200px;
    }
</style>

这样不行吗？

【讨论】：

看来我需要坚持使用内联样式或 css

【解决方案4】：

添加一个包含足够空格的空选项...

【讨论】：

如果我需要一个空白空间，这可以工作，谢谢建议

【解决方案5】：

根据http://www.w3.org/TR/html401/interact/forms.html#h-17.6，无法在纯 HTML 中执行此操作。你可以使用 style 元素来设置它，虽然它是内联的，所以有点没有 css。

<select style="width: ....

【讨论】：