html-在类似表格的定义列表中的术语描述对的背景之间保持相同的高度

前端之家收集整理的这篇文章主要介绍了html-在类似表格的定义列表中的术语描述对的背景之间保持相同的高度 前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我想以HTML格式定义一个定义列表,就像它是一个在列中带有th且在另一个td中具有一个表的表,其背景每行交替(尽管dt和dd的背景也​​适合该问题),所以我有这个CSS:

  1. dl {
  2. font-family: Verdana,Geneva,sans-serif;
  3. font-size: 0.6em;
  4. overflow: hidden;
  5. width: 200px;;
  6. }
  7. dl dt {
  8. font-weight: bold;
  9. float: left;
  10. clear: left;
  11. padding-right: 1%;
  12. width: 48%;
  13. }
  14. dl dt:nth-of-type(odd),dl dd:nth-of-type(odd) {
  15. background-color: #EEE;
  16. }
  17. dl dt:nth-of-type(even),dl dd:nth-of-type(even) {
  18. background-color: #DDD;
  19. }
  20. dl dd {
  21. float: left;
  22. width: 50%;
  23. padding-left: 1%;
  24. margin-left: 0;
  25. }

HTML示例:

  1. <dl>
  2. <dt>Key 1</dt>
  3. <dd>Value 1</dd>
  4. <dt>Very very very long key 2</dt>
  5. <dd>Value 2</dd>
  6. <dt>Key 3</dt>
  7. <dd>Value 3 with<br /> line breaks</dd>
  8. <dt>Key 4</dt>
  9. <dd>Value 4</dd>
  10. </dl>

问题是,由于最终的高度差异,列表中没有背景的“孔”出现在列表中:

有办法解决吗?

最佳答案
这适用于所有浏览器

(编辑* Alohci-我发誓不抄袭你.发布此信息后才看到你的答案)

  1. <style type="text/css">
  2. dl {
  3. font-family: Verdana,sans-serif;
  4. font-size: 0.6em;
  5. overflow: hidden;
  6. width: 200px;
  7. }
  8. dl dt {
  9. font-weight: bold;
  10. float: left;
  11. clear: left;
  12. width: 100px;
  13. margin-right:-100px;
  14. padding-right:100px;
  15. }
  16. dl dt,dl dd {
  17. background-color: #DDD;
  18. }
  19. dl dt.odd,dl dd.odd {
  20. background-color: #EEE;
  21. }
  22. dl dd {
  23. float: left;
  24. width: 100px;
  25. margin-left: 0;
  26. padding-left:100px;
  27. margin-left :-100px
  28. }
  29. span {
  30. position:relative;
  31. z-index:10;
  32. }
  33. </style>
  34. <dl>
  35. <dt class="odd"><span>Key 1</span></dt>
  36. <dd class="odd"><span>Value 1</span></dd>
  37. <dt><span>Very very very long key 2</span>
  38. </dt>
  39. <dd><span>Value 2</span></dd>
  40. <dt class="odd"><span>Key 3</span></dt>
  41. <dd class="odd"><span>Value 3 with<br /> line breaks</span></dd>
  42. <dt><span>Key 4</span></dt>
  43. <dd><span>Value 4</span></dd>
  44. </dl>

猜你在找的HTML相关文章