Question

鉴于以下html＆amp; 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＆amp; amp; DD标签和DT标签背景颜色覆盖较长DD标签的100％。使用上面的代码创建一个.html文件，看看它现在的样子。我确实把它作为一个表，但我现在被迫使用DL标记。任何帮助，将不胜感激。谢谢！

Answer 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;}

点击此处查看其他选项/解决方案Vertical Align text in a Label

希望这会有所帮助..

Answer 2

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

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

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

DL标签 - DT标签中的垂直对齐文本，颜色背景，与DD标签具有相同的高度

2 个答案: