Question

我在300px宽的容器中有以下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 top-aligned
多个DD s（一个DT）列在彼此之下

我发现了多个相关问题here，here和here，但是我没有设法排列不同的情况（DT高于{{1}多个DD s高于DD）。

Answer 1

我认为这个解决方案将与您想要的一些小调整一致。基本上，您还需要浮动所有dd，但是您需要清除它们以便它们垂直堆叠。但是，您无法清除第一个，因为您需要dt向左浮动。 +（下一个兄弟）选择器非常方便，因为您可以覆盖clear之后的第一个dd上的dt规则。您可能还需要更新其他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/

Answer 2

我会使用Bootstrap为你处理DL。

Bootstrap Description List

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

.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。为此，我会给他一个upvote。

试试这个。这将有助于更准确地了解你想要的东西。

DL就像一张桌子

2 个答案: