CSS - chiều rộng cố định span/div

Question

Tôi đang cố gắng bố cục nội dung cho hộp thoại bật lên, nhưng không có nhiều may mắn

Tôi đã thử sử dụng cả hai nhịp và div nội tuyến, nhưng không ai trong số họ có vẻ tôn trọng chiều rộng hoặc chiều rộng tối thiểu CSS

bất kỳ ý tưởng nào?

Đây là Html

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

và CSS

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

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

Tôi muốn tất cả các mục trong cột popupValue để được sắp xếp

có một JSFiddle đây:

http://jsfiddle.net/NtK4Y/

Answer 1

Nội dung nội tuyến không được xác định chiều rộng. Hãy thử sử dụng display: inline-block hoặc sử dụng display: block; float: left;

Tôi đã cập nhật jsfiddle của bạn; hãy xem http://jsfiddle.net/NtK4Y/1/

Answer 2

Sử dụng inline-block thay vì inline.

Bạn có thể xem được cập nhật jsfiddle http://jsfiddle.net/NtK4Y/2/

Answer 3

Một float:left cũng có thể giúp vấn đề của bạn, họ sẽ được đặt cạnh nhau.