ruby-on-rails - 重新排列 Formtastic 布局

Question

我是 formtastic 的新手，在 CSS 和样式表方面完全没有经验。

我正在尝试重新排列我的布局，使其看起来像这张图片的底部: 如您所见，我设法使下拉菜单很好地对齐，但不是费用/顾问时间。

这是我的 .erb 文件；

<div id="defaults">
    <% semantic_form_for <more stuff goes here> %>
    ......
    <div id="customer-details">
        <%= form.input :fee %>
        <%= form.input :consultant_hours %>

        <%= form.input :automatic_prolonging, :as => :radio, :collection => [[("Yes"), "true" ]] + [[("No"), 'false']], :wrapper_html => { :class => "compact" } %>
        <%= form.input :customer_segment, :as => :radio, :collection => [[("Industry"), "Industry" ]] +[[("Bank/Finance"), "Bank/Finance" ]] + [[("Products/Services"), 'Products/Services']]+ [[("Organization"), 'Organization']]+[[("Other"), 'Other']], :wrapper_html => { :class => "compact" } %>
    </div>
    <% end %>

我按如下方式编辑了我的 formtastic_changes.css 文件:

#customer-details li{
    clear: none;
    float: left;
    padding: 0;
    height: 60px;
    margin-right: 40px;
}

#customer-details .compact ol li, #social-post-defaults .compact ol li,
#customer-details .compact ol, #social-post-defaults .compact ol {
    width: 220px !important; 
    height: auto !important;
}

#customer-details .compactSelect, #social-post-defaults .compactSelect {
    width: 160px !important;
}

#customer-details .compactSelect ol, #social-post-defaults .compactSelect ol {
    width: 220px !important;
}

#customer-details .compactSelect .field, 
#social-post-defaults .compactSelect .field {
    width: 146px !important;
}

#customer-details .compactSelect ol li, 
#social-post-defaults .compactSelect ol li {
    width: 160px;
    height: auto !important;
    white-space: nowrap;
}

#customer-details .string input {
    width: 285px;
    margin: 2px 0 5px;
    padding: 2px;
    font-size: 13px;
}

这就是问题所在。无论我如何更改宽度属性，都没有任何变化。如果我删除“.string”，宽度更改会起作用，但字段仍然不会彼此对齐，而是彼此重叠/下方对齐。

我已经看过关于 railcasts 的两个 Formtastic 教程并查看了 formtastic Rdoc，但我似乎仍然无法解决这个问题。

任何人都可以向正确的方向轻推我吗？感谢您的帮助。

Answer 1

@Emil:试试

#customer-details input {
    float: left;
    font-size: 13px;
    margin: 2px 0 5px;
    padding: 2px;
    width: 285px;
}