我正在尝试布局一个弹出对话框的内容,但没有太多的运气
我已经尝试使用跨度和内联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:
解决方法
内联内容不能定义宽度.尝试使用display:inline-block或使用display:block; float:left;
我更新了你的jsfiddle;看看http://jsfiddle.net/NtK4Y/1/