我想以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>
