蓝图 css - 在 Rails 中选择标签答案

【问题标题】：blueprint css - select tag in rails蓝图 css - 在 Rails 中选择标签
【发布时间】：2011-08-30 15:07:56
【问题描述】：

目前正在开发 Rails 3。

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

select {
   width: 330px;
{

问题是，我希望在另一个页面上有下拉菜单，使用选择标签，我希望宽度为 230 像素。我尝试向选择标签添加一个类，但它不起作用：

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

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

<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}

我不明白为什么没有选择器它可以工作，但它可以工作。谁知道。感谢您帮助解答。

【问题讨论】：

标签： ruby-on-rails css blueprint-css

【解决方案1】：

您的 CSS 选择器：

select.ul-item

正在寻找一个select 标签，其类为ul-item

在你的 HTML 中没有那个类的选择标签。那就是问题所在。

【讨论】：

抱歉，我的错字。 ul-item 确实在那里。我把类与
- 、
  放在一起，但没有任何效果。我想如果有办法用一个类来标记一个 select_tag，我不知道该怎么做。请让我知道我是否应该将 ul-item 类放在 select_tag 中的某个位置
类项目可以去任何地方。您只需要确保您的 css 选择器与 DOM 结构匹配即可找到匹配项。

【解决方案2】：

试试这个

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

【讨论】：

你能查看源代码并向我展示特定选择部分的 html 吗？

【解决方案3】：

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

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

或者尝试将!important 添加到宽度属性。

【讨论】：

【解决方案4】：

奇怪的是，实际起作用的是：

#gender, #age_range {width: 230px}

我不明白为什么没有选择器它可以工作，但它可以工作。谁知道。感谢您帮助解答。

【讨论】：