css - 选择选项宽度

Question

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

Answer 1

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

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

在 head部分。如果您想为某些人这样做 select仅元素，您需要替换选择器 select通过更具限制性的东西，例如select.foo将影响限制在那些 select具有 class=foo 的元素属性。

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

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