html – CSS – 固定宽度span / div

前端之家收集整理的这篇文章主要介绍了html – CSS – 固定宽度span / div前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试布局一个弹出对话框的内容,但没有太多的运气

我已经尝试使用跨度和内联div,但他们似乎都不尊重宽度或最小宽度的CSS

有任何想法吗?

这是Html

  1. <div id="MessageBox" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 40.8333px; height: auto;" scrolltop="0" scrollleft="0">
  2.  
  3. <div class="popupKey">Bank Reference</div>
  4. <div class="popupValue"></div>
  5. <br>
  6. <div class="popupKey">Amount</div>
  7. <div class="popupValue">650.00</div>
  8. <br>
  9. <div class="popupKey">Currency</div>
  10. <div class="popupValue">GBP</div>
  11. <br>
  12. <div class="popupKey">PaymentDate</div>
  13. <div class="popupValue">02/06/2011</div>
  14. <br>
  15. <div class="popupKey">Remitter</div>
  16. <div class="popupValue"></div>
  17. <br>
  18. <div class="popupKey">Senders Reference</div>
  19. <div class="popupValue"></div>
  20. <br>
  21. </div>

和CSS

  1. .popupKey
  2. {
  3. display : inline;
  4. min-width: 150px;
  5. }
  6.  
  7. .popupValue
  8. {
  9. display : inline;
  10. min-width: 150px;
  11. }

我希望popupValue列中的所有项目都对齐

这里有一个JSFiddle:

http://jsfiddle.net/NtK4Y/

解决方法

内联内容不能定义宽度.尝试使用display:inline-block或使用display:block; float:left;

我更新了你的jsfiddle;看看http://jsfiddle.net/NtK4Y/1/

猜你在找的HTML相关文章