Реорганизация форматной компоновки

Question

Я совершенно новичок в formtastic и довольно неопытный, когда дело доходит до CSS и таблиц стилей.

Я пытаюсь изменить свой макет выглядеть в нижней части этой картины: Как вы можете видеть, что я сумел сделать выпадающие выровнять красиво, но не в часы Fee/консультант.

Это мой .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; 
} 

И это проблема. Независимо от того, насколько я изменяю атрибут width, ничего не меняется. Если я удаляю «.string», изменение ширины работает, но поля по-прежнему не выравниваются рядом друг с другом, кроме как над/под друг друга.

Я смотрел оба руководства по форматированию на рельсах и просматривал формату Rdoc, но я все еще не могу решить эту проблему.

Может ли кто-нибудь подтолкнуть меня в правильном направлении? Благодарен за любую помощь.

Answer 1

@Emil: Попробуйте

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