4

我没有真正的 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>
4

4 回答 4

8

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

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

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

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

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

于 2013-09-19T08:28:04.637 回答
1

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

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

然后将此添加到您的CSS

select.selectList { width: 150px; }

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

jsfiddle

于 2016-11-14T16:05:38.797 回答
0

在您的样式表中：

table tr td select{width:150px;}

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

于 2013-09-19T08:25:36.543 回答
0

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

<select style="width: 400px">
于 2013-09-19T08:21:01.230 回答