Jak umieścić dwie litery div na tej samej linii z CSS w simple_form w szynach?

Question

Umieszczenie dwóch elementów div na tej samej linii to stare pytanie. Ale nie mogę znaleźć rozwiązania podczas pracy z simple_form w szynach. Chcę tylko wyświetlać treść i jej etykietę w tej samej linii. Szerokość etykiety wynosi 125px (.left), a zawartość jest po prawej stronie (.right). Tekst na etykiecie jest wyrównany w prawo, a tekst w treści wyrównany do lewej.

Oto 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"> 

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

Jednak w rezultacie nie jest LINEBREAK, tak:

Proj Name： 
must have a name 

Kod erb w prostej formie to:

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

Nie chcę używać tabeli, ale tylko CSS, aby rozwiązać problem.

Answer 1

Twoje css jest w porządku, ale myślę, że to nie dotyczy div. Po prostu napisz prostą nazwę klasy, a następnie spróbuj. Można to sprawdzić pod numerem 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

Nie można unieść elementu ani ustawić szerokości elementu jako elementu wstawianego. Usuń display: inline; z obu klas, a twój znacznik powinien prezentować się dobrze.

EDYCJA: Możesz ustawić szerokość, ale spowoduje to, że element będzie renderowany jako blok.