html - CSS 显示 :table-cell; is not displaying at 100% of the width of the outer

Question

我有一个 <dl>和 <dd>我正在尝试将其转换为表格单元格，但无法正确显示宽度。

外层<dl>是 100% 而 <dt>分别为 20% 和 80%。为什么不 <dt>每行一起显示在外部宽度的 100% <dl>

我应该看到的只有红色和蓝色，没有黄色

这是我的 fiddle - 感谢您的帮助

http://jsfiddle.net/35Gmm/2/

Answer 1

需要在定义列表中将显示切换为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%;
    }

working example

但是为什么要使用定义列表(术语列表 (dt)，然后您要为 (dd) 提供解释)，如果您的数据在语义上不适合吗？ (或者 fiddle 只是一些随机样本数据？)