Come mettere due div sulla stessa riga con CSS in simple_form in rails?

Question

Inserire due div sulla stessa riga è una vecchia domanda. Ma non riesco a trovare una soluzione quando lavoro con simple_form in rails. Quello che voglio fare è visualizzare il contenuto e la sua etichetta sulla stessa riga. La larghezza dell'etichetta è 125 px (.left) e il contenuto è sulla destra (.right). Il testo nell'etichetta è allineato a destra e il testo nel contenuto è allineato a sinistra.

Ecco il codice HTML:

<form id="new_production" class="simple_form new_production" novalidate="novalidate" method="post" action="/projects/1/productions" accept-charset="UTF-8"> 
    <div style="margin:0;padding:0;display:inline"> 
     <input type="hidden" value="✓" name="utf8"> 
     <input type="hidden" value="2UQCUU+tKiKKtEiDtLLNeDrfBDoHTUmz5Sl9+JRVjALat3hFM=" name="authenticity_token"> 
    </div> 
    <div class="left">Proj Name：</div> 
    <div class="right">must have a name</div> 
    <div class="input string required"> 

Ecco il CSS:

.simple_form div.left { 
    float: left; 
    width: 125px; 
    text-align: right; 
    margin: 2px 10px; 
    display: inline; 
} 

.simple_form div.right { 
    float: left; 
    text-align: left; 
    margin: 2px 10px; 
    display: inline; 
} 

Tuttavia, nel risultato, c'è un'interruzione di riga, in questo modo:

Proj Name： 
must have a name 

Il codice ERB del modulo semplice è:

<div class="left">Proj Name：</div><div class="right"><%= @project.name %></div> 

Non voglio usare una tabella ma CSS solo per risolvere il problema.

Answer 1

Il tuo css va bene, ma penso che non si stia applicando su div. Basta scrivere un semplice nome di classe e poi provare. Puoi verificarlo allo Jsfiddle.

.left { 
    float: left; 
    width: 125px; 
    text-align: right; 
    margin: 2px 10px; 
    display: inline; 
} 

.right { 
    float: left; 
    text-align: left; 
    margin: 2px 10px; 
    display: inline; 
} 

Answer 2

Impossibile fluttuare o impostare la larghezza di un elemento in linea. Rimuovi display: inline; da entrambe le classi e il tuo markup dovrebbe presentarsi bene.

MODIFICA: è possibile impostare la larghezza, ma l'elemento verrà reso come blocco.