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.

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

于 2012-04-13T08:30:12.527 回答
0

Afloat:left也可能对您的问题有所帮助，它们将彼此相邻放置。

于 2012-04-13T08:40:36.880 回答