选择选项宽度

Question

我没有真正的CSS经验,我没有最好的设计网页,如微软表达.

我的问题很简单,它有些虚荣..新的,

我希望我的页面看起来尽可能对称,所以我希望我的选择选项具有相同的宽度.我搜索过,最好的解决方案是在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更糟糕的东西.然后事情也取决于字体大小.)

考虑是否有必要设置宽度相同.这只是一种美学偏好,并非所有人都能共享,事实上它可能对可用性不利.具有短期权的下拉列表应该与具有长期权的另一个下拉列表看起来不同.