3

我DL在一个 300px 宽的容器中有以下内容。

<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左栏中有，右栏中有DDs
  • rowX 和 valueX 顶部对齐
  • 多个DDs（代表一个DT）在彼此下方列出

我在这里、这里和这里发现了多个相关的问题，但是我都没有设法将不同的情况进行顶部对齐（DT高于DD，多个DDs 高于DT）。

4

2 回答 2

4

我认为这个解决方案将与你想要的一些小的调整一致。基本上，您还需要浮动所有dds，但您需要清除它们以便它们垂直堆叠。但是，您无法清除第一个，因为您需要dt向左浮动。（下一个+兄弟）选择器对此很方便，因为您可以覆盖. 您可能还需要更新其他s 的边距。cleardddtdd

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/

于 2013-04-01T22:16:13.183 回答
2

我会使用 Bootstrap 为您处理 DL。

引导描述列表

他们有两个选项，您还可以根据自己的喜好自定义他们的设置。只是一个建议。

.dl-horizontal:before,
.dl-horizontal:after {
    display: table;
    content: "";
    line-height: 0;
}
.dl-horizontal dt {
  float: left;
  width: 160px;
  clear: left;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dl-horizontal dd {
  margin-left: 180px;
}

http://jsfiddle.net/rzWnG/1/

这就是 bootstrap 用来制作水平 DL 的方法。我对它进行了一些设计，以便更好地满足您的需求。我使用了他的 JSfiddle 中的 Explosion Pills html。为此，我会给他一个赞成票。

试试这个。准确了解您想要的内容会有所帮助。

于 2013-04-01T22:06:23.937 回答