1

给定以下 html 和 CSS：

dl.table-display {
  float: left;
  width: 520px;
  margin: 1em 0;
  padding: 0;
  border-bottom: 1px solid #999;
}

.table-display dt {
  clear: left;
  float: left;
  width: 200px;
  margin: 0;
  padding: 5px;
  border-top: 1px solid #999;
  font-weight: bold;
  background-color: #cccccc;
}

.table-display dd {
  float: left;
  width: 300px;
  margin: 0;
  padding: 5px;
  border-top: 1px solid #999;
}
<dl class="table-display">
  <dt>Key 1</dt>
  <dd>Value 1</dd>
  <dt>Key 2</dt>
  <dd>Value 2<br/>With line breaks<br/>and line breaks</dd>
</dl>

我正在尝试将 DT 和 DD 标签中的文本居中，并使 DT 标签背景颜色覆盖 100% 的较长 DD 标签。使用上面的代码创建一个 .html 文件，看看它现在的样子。我确实有这个表格，但我现在被迫使用 DL 标记。任何帮助，将不胜感激。谢谢！

4

2 回答 2

1

为你的 dt 元素设置一个高度将“拉伸”背景，只要这个高度 >= 包含的 dd 的高度，它就会看起来如你所愿。

dt{height:100px;}

在 dl 标签上提供 text-align:center 将使您的文本居中。

dl{text-align:center;}

困难的部分是尝试将文本垂直对齐到中间。一个选项是将文本包含在绝对定位的 div 中。但有点混乱。 

<dt><div>Key 1</div></dt>

dt{position:relative;height:100px;}
dt div{position:absolute;bottom:50px;}

在此处检查其他选项/解决方案垂直对齐标签中的文本

希望这可以帮助..

于 2013-02-25T03:00:10.800 回答
0

dt {display:table-cell}将让您垂直对齐 dt 中的文本。就我而言，我需要将文本垂直对齐到底部。例子：

dt {
    display:table-cell;
    vertical-align:middle;
    height:5em;
}

顺便说一句，dl {display:table-cell}将每个<dl>放在一条水平线上，类似于浮动（或类似于一行表格单元格）。如果您为 设置高度<dt>并在底部添加边框，则该底部边框将形成一条直线，就像表格单元格边框一样。

于 2015-08-19T21:56:12.623 回答