左对齐描述列表内容

编程问答 2022-08-13

问题描述

我要显示一些数据，

enter image description here

我想将所有值左对齐到最长标签的边缘。我至少可以想到四个选择：

  1. <table>
  2. fixed width labels
  3. splitting labels and values across bootstrap columns
  4. the way bootstrap suggests to do it（来自here的建议）。

我不喜欢<table>选项，因为这不像表格数据那样-没有标题或任何东西。 我不喜欢固定宽度标签的想法，因为它对标签内容和/或翻译的更改似乎很脆弱。 我不喜欢跨列拆分标签和值，因为它在语义上将<dt>与<dd> s分开，我假设不利于可访问性（请告知我是否这是不正确的！）。 我喜欢引导程序建议处理它的方式，但是我们的设计师不希望页面越宽，值越远离标签。

是否有一种更惯用的方式来处理此问题？或者这些选项之一是否还可以？

解决方法

在this comment之后，有一个CSS grid解决方案：

<dl class="grid">
  <dt>A Label:</dt>
  <dd>Value 1</dd>
  <dt>A Longer Label:</dt>
  <dd>Value 2</dd>
  <dt>Short:</dt>
  <dd>Value 3</dd>
</dl>

.grid {
  column-gap: 10px;
  display: grid;
  grid-template-columns: auto 1fr;
}

dt {
  grid-column: 1;
}
dd {
  grid-column: 2;
}

可以在此codepen中查看。

htmltwitter-bootstrap