Raylarda basit bir formda CSS ile aynı satırda iki div nasıl yazılır?

Question

Aynı satırda iki div koymak eski bir sorudur. Ancak, raylarda simple_form ile çalışırken bir çözüm bulamıyorum. Yapmak istediğim, içeriği ve etiketini aynı satırda görüntülemek. Etiketin genişliği 125 pikseldir (.left) ve içerik sağdadır (.right). Etiketteki metin sağa hizalanır ve içerikteki metinler sola hizalanır. Orada bir linebreak, yani gibi sonucu, Ancak

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

:

Proj Name： 
must have a name 

İşte

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

CSS: İşte

HTML'dir Basit formun erb kodu:

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

Bir tablo kullanmak istemiyorum, ancak yalnızca sorunu çözmek için CSS kullanıyorum.

Answer 1

CSS'niz gayet iyi, ama sanırım div üzerinde uygulama yapmıyor. Sadece basit bir sınıf adı yaz ve sonra dene. Jsfiddle adresinden kontrol edebilirsiniz.

.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

yüzebilir veya genişliğini satır içi bir öğeye ayarlayamazsınız. Her iki sınıftan da display: inline;'u kaldırın ve işaretlemenizin iyi olması gerekir.

DÜZENLEME: Genişliği ayarlayabilirsiniz, ancak öğenin bir blok olarak işlenmesine neden olur.