重新排列Formtastic布局

Question

对于CSS和样式表来说，我对formtastic和美丽的未经验的人是完全陌生的。

我试图重新安排我的布局，看起来像这幅画的底部： 正如你可以看到我设法让下拉式菜单中能很好地对齐，而不是费/顾问小时。

这是我的.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”，宽度改变的作品，但是这些字段仍然没有对齐，而是彼此相邻。

我已经观看了关于铁路广播的Formtastic教程，并通过formtastic Rdoc看了一下，但我仍然无法解决这个问题。

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

Answer 1

@Emil：尝试

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