CSS - 固定幅のスパン/ divの

Question

私はポップアップダイアログボックスのコンテンツをレイアウトしようとしているが、私は両方のスパンやインラインdivを使用して試した多くの幸運

を持っていないが、それらのどちらも尊重するように見えるのです幅または分の幅CSS

アイデア？

はここの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> 

とCSS

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

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

だ私はJSFiddleがここにありますpopupValue列内のすべての項目が

を揃えることがしたいと思います：

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もあなたの問題を助けるかもしれないを見ることができ

、彼らは隣同士に配置されます。