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会让事情变得更糟。那么事情也会取决于字体大小。）

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

Answer 2

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

<select style="width: 400px">

Answer 3

在样式表中：

table tr td select{width:150px;}

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

Answer 4

我在选择上放了一个课程并使用

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

然后将此添加到您的css

select.selectList { width: 150px; }

注意：带有id＆＃39; s的作品的标签而不是名称，并且不使用内联样式的css（）。

jsfiddle

选择选项宽度

4 个答案: