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

Mettere due div sulla stessa linea è 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 è 125px ( .left ) e il contenuto è sulla destra ( .right ). Il testo nell’etichetta è allineato a destra e il testo nel contenuto è allineato a sinistra.

Ecco l’HTML:

 
Proj Name:
must have a name

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 è:

 
Proj Name:

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

    Il tuo css va bene, ma penso che non si stia applicando su div. Basta scrivere un semplice nome di class e poi provare. Puoi controllarlo su 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; } 

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

    EDIT: puoi impostare la larghezza, ma farà sì che l’elemento sia reso come un blocco.