Question

目前正在使用rails 3。

我在css文件中进行了更改，通过进行以下更改，将330px的宽度添加到选择下拉菜单的大小：

select {
   width: 330px;
{

问题是，还有另一个页面我想要使用select标签的下拉菜单，我希望宽度为230px。我尝试在select标签中添加一个类，但它不起作用：

select.ul-item {
   width: 230px;
{

这是我希望下拉菜单为230px的视图页面。

<ul>
  <li><%= select_tag(:gender, options_for_select(['Male', 'Female', 'Unisex'])) %></li>
  <li><%= select_tag(:age_range, options_for_select(['Birth-12 Mos.', '12-24 Mos.', '2 Years', '3-4 Years', '5-7 Years', '8-11 Years', '12+ Years'])) %></li>
</ul>

我做错了什么？

更新一次

这是页面来源：

  <div class="span-6">

<ul>
  <li><select id="gender" name="gender"><option value="Male">Male</option><option value="Female">Female</option><option value="Unisex">Unisex</option></select></li>
  <li><select id="age_range" name="age_range"><option value="Birth-12 Mos.">Birth-12 Mos.</option><option value="12-24 Mos.">12-24 Mos.</option><option value="2 Years">2 Years</option><option value="3-4 Years">3-4 Years</option><option value="5-7 Years">5-7 Years</option><option value="8-11 Years">8-11 Years</option><option value="12+ Years">12+ Years</option></select></li>
</ul>

更新二 - 已解决

奇怪的是，实际上有效的是：

#gender, #age_range {width: 230px}

我不明白为什么没有选择器它可以正常工作。谁知道。感谢您帮助解决问题。

Answer 1

你的CSS选择器：

select.ul-item

正在寻找类别为select

的ul-item代码

否则HTML中的哪个位置包含该类的select标记。那就是问题所在。

Answer 2

试试这个

select#gender, select#age_range{
  width: 230px;
}

Answer 3

尝试使选择器尽可能强大。

body div.span-6 ul li select#gender,
body div.span-6 ul li select#age_range {
  width: 230px;
}

或尝试将!important添加到width属性。

Answer 4

奇怪的是，实际上有效的是：

#gender, #age_range {width: 230px}

我不明白为什么没有选择器它可以正常工作。谁知道。感谢您帮助解决问题。

blueprint css - 在rails中选择标签

4 个答案: