सीएसएस - निर्धारित चौड़ाई अवधि/div

Question

मैं एक पॉपअप संवाद बॉक्स के लिए सामग्री लेआउट के लिए कोशिश कर रहा हूँ, लेकिन बहुत किस्मत

मैं दोनों फैला और इनलाइन divs का उपयोग कर की कोशिश की है नहीं, लेकिन उनमें से न तो सम्मान करने के लिए लग रहे हैं चौड़ाई या न्यूनतम चौड़ाई सीएसएस

कोई विचार?

यहाँ एचटीएमएल

<div id="MessageBox" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 40.8333px; height: auto;" scrolltop="0" scrollleft="0"> 

<div class="popupKey">Bank Reference</div> 
<div class="popupValue"></div> 
<br> 
<div class="popupKey">Amount</div> 
<div class="popupValue">650.00</div> 
<br> 
<div class="popupKey">Currency</div> 
<div class="popupValue">GBP</div> 
<br> 
<div class="popupKey">PaymentDate</div> 
<div class="popupValue">02/06/2011</div> 
<br> 
<div class="popupKey">Remitter</div> 
<div class="popupValue"></div> 
<br> 
<div class="popupKey">Senders Reference</div> 
<div class="popupValue"></div> 
<br> 
</div> 

और सीएसएस

.popupKey 
{ 
    display : inline; 
    min-width: 150px; 
} 

.popupValue 
{ 
    display : inline; 
    min-width: 150px; 
} 

मैं popupValue स्तंभ में सभी आइटम चाहते हैं गठबंधन किया जाना

है वहाँ यहाँ है एक JSFiddle:

http://jsfiddle.net/NtK4Y/

Answer 1

इनलाइन सामग्री की चौड़ाई परिभाषित नहीं हो सकती है। display: inline-block का उपयोग करने का प्रयास करें या display: block; float: left;

का उपयोग करके मैंने अपना jsfiddle अपडेट किया है; http://jsfiddle.net/NtK4Y/1/

Answer 2

inline के बजाय inline-block का उपयोग करें।

आप jsfiddle अद्यतन देख सकते हैं http://jsfiddle.net/NtK4Y/2/

Answer 3

एक float:left भी आपकी समस्या को मदद कर सकता है, वे एक दूसरे के बगल में रखा जाएगा।