选择选项宽度

Question

我不太擅长 CSS，也没有像 Microsoft expression 这样的最佳网页设计工具。

我的问题很简单：我希望我的页面尽可能对称，因此我希望我的选择选项具有相同的宽度。我已经搜索过了，最好的解决方案是使用 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>
</tr>

- John Makii

Answer 1

如果您想在文档中的所有元素上设置相同的宽度，可以如下编写：<style> select { width: 5.5em } </style> 在 head 部分中添加。如果您只想对某些 select 元素执行此操作，则需要将选择器 select 替换为更具限制性的内容，例如 select.foo，以将效果限制为具有 class=foo 属性的那些 select 元素。 这很棘手，因为您需要一个足够容纳所有选项的宽度，并且可能希望尽可能接近最大宽度。选项的宽度取决于它们的文本以及字体。（使用 px 使事情变得更糟。然后，事情还会取决于字体大小。） 考虑是否有必要将宽度设置为相同的值。这只是美学偏好，不是所有人都共享，并且实际上可能对可用性不利。一个具有短选项的下拉列表应该看起来与另一个具有长选项的下拉列表不同。

- Jukka K. Korpela

Answer 2

我会在选择框上加上一个类，并使用它。

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

然后将此添加到你的CSS中。

select.selectList { width: 150px; }

注意：label适用于id而不是name，避免使用内联样式css（）。 jsfiddle

- akwasiijunior

Answer 3

关于您的宽度设置，您有一个小错误。您需要

<select style="width: 400px">

- alejo802

---

还有一件事，我有一个 CSS 文件，我宁愿把它放在那里，如何链接这些选择器？这是我的主要问题。 - John Makii

@user1891608，您应该通过编辑问题本身而不仅仅是在评论中来澄清您的主要问题。目前，它根本没有提到您在此描述为主要问题的问题。 - Jukka K. Korpela

我想我已经问过了，我问如何去做...意思是我该怎么做...有哪些方法可以做到...虽然没有具体说明...我忘记提到了，所以很抱歉:( - John Makii

Answer 4

在你的样式表中：

table tr td select{width:150px;}

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

- Dale

---

这不会改变任何东西，我需要知道哪些特定的语法吗？ - John Makii

这应该绝对改变您选择框的宽度。您确定您正确地链接到外部样式表吗？您看过Firefox的Firebug吗？它是一个非常好的检查HTML和CSS的工具。 - Dale