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 タグの背景色で長い DD タグを 100% カバーしようとしています。上記のコードを使用して .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 に答える