html - DL像一张 table

Question

我在一个 300 像素宽的容器中有以下 DL。

<style type="text/css">
dl {width: 300px}
dt {
  float:left;
  clear: left;
  width: 70px;
}
</style>
<dl>
  <dt>Row1</dt>
  <dd>Value1</dd>
  <dt>Row2</dt>
  <dd>Value2</dd>
  <dt>Row3 with longer title requiring line breaks</dt>
  <dd>Value 3</dd>
  <dt>Row4</dt>
  <dd>Value4</dd>
  <dt>Row5</dt>
  <dd>Value5.1</dd>
  <dd>Value5.2</dd>
  <dt>Row6</dt>
  <dd>Value6.1</dd>
  <dd>Value6.1</dd>
  <dd>Value6.1</dd>
</dl>

我怎样才能使元素看起来像表格，即:

• 在左列中有 DT，在右列中有 DD
• rowX 和 valueX 顶部对齐
• 多个DD(对于一个DT)在彼此下方列出

我发现了多个相关问题 here , here和 here ，但我都没有设法顶部对齐不同的情况(DT 高于 DD，多个 DD 高于 DT).

Answer 1

我认为这个解决方案只需进行一些小的调整就可以满足您的需求。基本上，您还需要 float 所有 dd，但您需要清除它们以便它们垂直堆叠。但是，您不能清除第一个，因为您需要 dt 向左浮动。 +(下一个同级)选择器对此很方便，因为您可以在 dt 之后的第一个 dd 上覆盖 clear 规则。您可能还需要更新其他 dd 的边距。

dl {width: 300px}
dt {
  float:left;
  clear: left;
  width: 70px;
}
dd {
    clear: left;
    float: left;
    margin-left: 70px;
}
dt + dd {
    float: left;
    clear: none;
    margin-left: 0;
}

http://jsfiddle.net/8VKng/2/