Réorganisation de la mise en page Formtastic

Question

Je suis totalement novice dans le domaine du formtastic et je ne suis pas du tout familiarisé avec les CSS et les feuilles de style.

Je suis en train de réorganiser ma mise en page pour ressembler au bas de cette image: Comme vous pouvez le voir, je réussi à faire les menus déroulants alignent bien, mais pas les frais Heures/Consultant.

Ceci est mon fichier .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 %> 

J'ai effectué mon dossier formtastic_changes.css comme suit:

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

Et c'est le problème. Peu importe combien je change l'attribut width, rien ne change. Si je supprime le ".string", le changement de largeur fonctionne, mais les champs ne s'alignent toujours pas l'un à côté de l'autre, mais sur/sous l'autre. J'ai regardé les deux tutoriels Formtastic sur railcasts et ai regardé le formocastic Rdoc mais je ne semble toujours pas capable de résoudre ce problème.

Quelqu'un peut-il me pousser dans la bonne direction? Reconnaissant pour toute aide.

Answer 1

@Emil: Essayez

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