选择选项宽度答案

【问题标题】：Select option width选择选项宽度
【发布时间】：2023-03-23 04:20:01
【问题描述】：

我没有真正的 CSS 经验，也没有最适合用于设计网页的工具，例如 microsoft expression。

我的问题很简单，它在某种程度上是徒劳的.. neways，

我希望我的页面看起来尽可能对称，所以我希望我的选择选项具有相同的宽度。我已经搜索过，最好的解决方案是在 css 上使用 width="" 选项。那我该怎么办呢？

有这个例子：

<tr>
        <td><label for="meal">Meal:</label></td>
        <td>
        <select name="meal">
                                        <option selected="selected" value="0">Any</option>
                                        <option value="Breakfast">Breakfast</option>
                                        <option value="Brunch">Brunch</option>
                                        <option value="Lunch">Lunch</option>
                                        <option value="Snack">Snack</option>
                                        <option value="Dinner">Dinner</option>
                                    </select>
        </td>


        <td><label for="cooking">Cooking:</label></td>
        <td>
        <select name="cooking">
                                        <option selected="selected" value="0">Any</option>
                                        <option value="Baked">Baked</option>
                                        <option value="BBQ">Barbecque</option>
                                        <option value="Boiled">Boiled</option>
                                        <option value="Dfried">Deep Fried</option>
                                        <option value="Grilled">Grilled</option>
                                        <option value="Steamed">Steamed</option>
                                    </select>
        </td>

【问题讨论】：

标签： css select width option

【解决方案1】：

对于您的宽度设置，您有一个小错字。你需要

<select style="width: 400px">

【讨论】：

还有一件事，我有一个 css 文件，所以 id 宁愿把它放在那里，我如何链接这些选择？这是我的主要问题
@user1891608，您应该通过编辑问题本身来澄清您的主要问题，而不仅仅是在 cmets 中。目前，它根本没有提到你在这里描述为主要问题的问题。
我想我做到了，我问我该怎么做......意味着我该怎么做......我可以做些什么......虽然不是特别......我忘了提到这一点，我很抱歉:(

【解决方案2】：

在您的样式表中：

table tr td select{width:150px;}

这将使表格单元格内的所有选择框具有相同的宽度。我不会走内联 css 路线。

【讨论】：

这并没有改变任何东西，有什么我应该知道的特殊语法吗？
这肯定会改变你的选择框的宽度。您确定您正确链接到外部样式表吗？你看过 Firebug for firefox 吗？它是一个非常好的检查 html 和 css 的工具。

【解决方案3】：

如果您想在文档中的所有select 元素上设置相同的宽度，您可以编写例如

<style>
select { width: 5.5em }
</style>

在head 部分。如果您希望仅对某些 select 元素执行此操作，则需要将选择器 select 替换为更具限制性的内容，例如select.foo 将效果限制为具有 class=foo 属性的 select 元素。

这很棘手，因为您需要一个足以满足所有选项的宽度，并且您可能希望尽可能接近最大宽度。选项的宽度取决于字体上的文本和。（使用px 会使事情变得更糟。那么事情也将取决于字体大小。）

考虑是否有必要将宽度设置为相同。这只是一种审美偏好，并不是所有人都认同的，实际上它可能对可用性不利。带有短选项的下拉菜单可能看起来与另一个带有长选项的下拉菜单不同。

【讨论】：

感谢您的洞察力。

【解决方案4】：

我会在选择上放一个类并使用

<select class="selectList" id="meal"><option>your options</options></select

然后将其添加到您的 css 中

select.selectList { width: 150px; }

注意：标签使用 id 而不是名称，避免使用内联样式 css ()。

jsfiddle

【讨论】：