CSS 选择选项宽度

Select option width

提问by John Makii

Im not really experienced in CSS and i have no tools that are best used in designing webpages such as microsoft expression.

我在 CSS 方面并没有真正的经验，而且我没有最适合用于设计网页的工具，例如 microsoft expression。

My problem is simple, its somehow vain.. neways,

我的问题很简单，不知何故是徒劳的..neways，

i want my page to look symmetrical as possible so i want my select options to be of same width. I've searched and the best solution is to use width="" option on css. so how do i go about this?

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

have this example:

有这个例子：

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

回答by Jukka K. Korpela

If you want to set the same width on all selectelements in a document, you can write e.g.

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

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

in the headpart. If you wish to do that for some selectelements only, you need to replace the selector selectby something more restrictive, e.g. select.footo restrict the effect to those selectelements that have the class=fooattribute.

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

This is tricky because you need a width that is sufficient for all options, and you probably want to get as close to the maximal width as possible. The widths of options depend on their text andon the font. (Using the pxmakes things even worse. Then things would depend on font size, too.)

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

Consider whether it is necessary to set the widths the same. It is just an esthetic preference, not shared by all people, and it may in fact be bad for usability. A dropdown with short options should perhaps look different from another dropdown that has long options.

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

回答by alejo802

For your width setting, you have a small typo. You need

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

<select style="width: 400px">

回答by Dale

In your stylesheet:

在您的样式表中：

table tr td select{width:150px;}

That will make all the selectboxes inside a table cell the same width. I would not go the inline css route.

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

回答by akwasiijunior

I'd put a class on the selects and use

我会在选择和使用上设置一个类

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

and then added this to your css

然后将其添加到您的 css 中

select.selectList { width: 150px; }

Note: label for works with id's and not name and refrain from using inline-style css ().

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

jsfiddle

提琴手