频道导航

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

2019-12-21 HTML 前端之家

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

@H_502_0@

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

dl {
    font-family: Verdana,Geneva,sans-serif;
    font-size: 0.6em;
    overflow: hidden;
    width: 200px;;
    }
dl dt {
    font-weight: bold;
    float: left;
    clear: left;
    padding-right: 1%;
    width: 48%;
    }

dl dt:nth-of-type(odd),dl dd:nth-of-type(odd) {
        background-color: #EEE;
    }
dl dt:nth-of-type(even),dl dd:nth-of-type(even) {
        background-color: #DDD;    
    }
dl dd {
    float: left;
    width: 50%;
    padding-left: 1%;
    margin-left: 0;
    }

HTML示例：

<dl>
  <dt>Key 1</dt>
    <dd>Value 1</dd>
  <dt>Very very very long key 2</dt>
    <dd>Value 2</dd>
  <dt>Key 3</dt>
    <dd>Value 3 with<br /> line breaks</dd>
  <dt>Key 4</dt>
    <dd>Value 4</dd>
</dl>

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

有办法解决吗？

最佳答案

这适用于所有浏览器

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

<style type="text/css">
dl {
    font-family: Verdana,sans-serif;
    font-size: 0.6em;
    overflow: hidden;
    width: 200px;
}
dl dt {
    font-weight: bold;
    float: left;
    clear: left;
    width: 100px;
    margin-right:-100px;
    padding-right:100px;
}
dl dt,dl dd {
    background-color: #DDD;
}
dl dt.odd,dl dd.odd {
    background-color: #EEE;
}

dl dd {
    float: left;
    width: 100px;
    margin-left: 0;
    padding-left:100px;
    margin-left :-100px
}

span {
    position:relative;
    z-index:10;
}

</style>

<dl>
  <dt class="odd"><span>Key 1</span></dt>
  <dd class="odd"><span>Value 1</span></dd>
  <dt><span>Very very very long key 2</span>
  </dt>
  <dd><span>Value 2</span></dd>
  <dt class="odd"><span>Key 3</span></dt>
  <dd class="odd"><span>Value 3 with<br /> line breaks</span></dd>
  <dt><span>Key 4</span></dt>
  <dd><span>Value 4</span></dd>
</dl>