15

ポップアップダイアログボックスのコンテンツをレイアウトしようとしていますが、うまくいきません

スパンとインライン 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/

4

3 に答える 3

26

インライン コンテンツに幅を定義することはできません。使ってみdisplay: inline-blockたり使ってみたりdisplay: block; float: left;

あなたの jsfiddle を更新しました。http://jsfiddle.net/NtK4Y/1/をご覧ください

于 2012-04-13T08:29:10.803 に答える
6

inline-blockの代わりに使用してくださいinline。

更新されたjsfiddlehttp : //jsfiddle.net/NtK4Y/2/を見ることができます

于 2012-04-13T08:30:12.527 に答える
0

Afloat:leftもあなたの問題を助けるかもしれません、それらは互いに隣り合って配置されます。

于 2012-04-13T08:40:36.880 に答える