रेल में सरल_फॉर्म में सीएसएस के साथ एक ही पंक्ति पर दो divs कैसे डालें?

Question

एक ही पंक्ति पर दो divs रखना एक पुराना सवाल है। लेकिन रेल में सरल_फॉर्म के साथ काम करते समय मुझे समाधान नहीं मिल रहा है। मैं वही लाइन पर सामग्री और उसके लेबल को प्रदर्शित करना चाहता हूं। लेबल की चौड़ाई 125px (.left) है और सामग्री दाईं ओर है (.right)। लेबल में पाठ दाईं ओर गठबंधन किया गया है और सामग्री में पाठ बाईं ओर गठबंधन है।

यहाँ 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"> 

यहाँ सीएसएस है:

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

हालांकि, परिणाम, एक LINEBREAK वहाँ है, इसलिए जैसे:

Proj Name： 
must have a name 

सरल रूप का एआरबी कोड है:

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

मैं किसी तालिका का उपयोग नहीं करना चाहता, लेकिन केवल समस्या को हल करने के लिए सीएसएस।

Answer 1

आपका सीएसएस ठीक है, लेकिन मुझे लगता है कि यह divs पर लागू नहीं है। बस सरल वर्ग का नाम लिखें और फिर कोशिश करें। आप इसे 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

आप पर फ्लोट नहीं कर सकते हैं या की चौड़ाई को इनलाइन तत्व सेट नहीं कर सकते हैं। दोनों कक्षाओं से display: inline; निकालें और आपके मार्कअप को ठीक दिखाना चाहिए।

संपादित करें: आप चौड़ाई निर्धारित कर सकते हैं, लेकिन यह तत्व को ब्लॉक के रूप में प्रस्तुत किया जाएगा।