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

我想以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示例：

Key 1

Value 1

Very very very long key 2

Value 2

Key 3

Value 3 with
line breaks

Key 4

Value 4

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

有办法解决吗？

最佳答案

这适用于所有浏览器

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

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;

}

Key 1

Value 1

Very very very long key 2

Value 2

Key 3

Value 3 with
line breaks

Key 4

Value 4

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！