CSS - 固定寬度的跨度/每格

我想佈局的彈出對話框的內容，但沒有多少運氣CSS - 固定寬度的跨度/每格

我同時使用跨度和內嵌的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; 
}

我想在popupValue列中的所有項目進行排列

有一個的jsfiddle這裏：

http://jsfiddle.net/NtK4Y/

來源

2012-04-13 ChrisCa

內聯內容不能定義寬度。嘗試使用display: inline-block或使用display: block; float: left;

我已更新您的jsfiddle;看看http://jsfiddle.net/NtK4Y/1/

來源

2012-04-13 08:29:10 Arno

如果您添加'float：left;'您自動聲明元素爲塊，所以在這種情況下我相信'display：block'是不必要的 – mkk 2012-04-13 08:55:05

使用inline-block而不是inline。

你可以看到更新的jsfiddle http://jsfiddle.net/NtK4Y/2/

來源

2012-04-13 08:30:12

一個float:left也可能會幫助你的問題，他們將被放在旁邊對方。

來源

2012-04-13 08:40:36 mparryy

CSS - 固定寬度的跨度/每格

回答

相關問題