我有一个<dl>
并且<dd>
我正在尝试将其转换为表格单元格,但我无法正确显示宽度。
外部<dl>
是 100%,而<dt>
's 是 20% 和 80%。为什么<dt>
每行一起显示的不是外部宽度的 100%<dl>
我应该看到的只有红色和蓝色,没有黄色
这是我的小提琴-感谢您的帮助
我有一个<dl>
并且<dd>
我正在尝试将其转换为表格单元格,但我无法正确显示宽度。
外部<dl>
是 100%,而<dt>
's 是 20% 和 80%。为什么<dt>
每行一起显示的不是外部宽度的 100%<dl>
我应该看到的只有红色和蓝色,没有黄色
这是我的小提琴-感谢您的帮助
使用这个 css 这将工作正常DEMO HERE
dl{
display:table;
}
您需要将显示切换到table
定义列表上
dl{
display:table;
}
并且可能想将一个dd
转换为dt
<dl>
<dt>hot drink</dt>
<dd>cold drink</dd>
</dl>
dl > dt {
background:red;
width: 20%;
}
dl > dd {
background:blue;
width: 80%;
}
但是,如果您的数据在语义上不适合它,为什么要使用定义列表(术语列表 ( dt
),然后您提供对 ( ) 的解释)?dd
(或者小提琴只是一些随机样本数据?)
将 dl > dd:nth-child(2) 更改为 dl > dd:nth-child(1)
它会起作用的。