Html 左对齐描述列表内容

我有一些数据要显示，如：

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

（来自中国的建议）

我不喜欢

选项，因为这不像是表格数据-没有标题或任何东西。 我不喜欢固定宽度标签的想法，因为它对标签内容和/或翻译的更改似乎很脆弱。 我不喜欢在列之间拆分标签和值，因为它在语义上将

与

分开，我认为这不利于可访问性（如果不正确，请告诉我！）。 我喜欢bootstrap建议的处理方式，但我们的设计师不希望随着页面变宽，值与标签的距离越来越远

有没有更惯用的方法来处理这个问题，或者这些选项中的一个可以吗？

下面是一个css

grid

解决方案：

标签：
值1
较长的标签：
价值2
简称：
价值3

.grid{
柱间距：10px；
显示：网格；
网格模板列：自动1fr；
}
dt{
网格柱：1；
}
dd{
网格柱：2；
}

---

这可以在这里查看。

我们可以使用js获得长标签的宽度并将其应用于其他标签吗？您可以在这里使用css

grid

。将标签宽度设置为

auto

，它将自动占用最长的宽度。@AbbasEbadian我相信我们可以使用JS，但我希望有一个纯CSS解决方案。如果没有惯用的CSS解决方案出现，将默认为@DebsmitaPaul很酷！我没听说过网格。我玩了一会儿，想出了这个-。是这样吗？是的，就是这样！您还可以添加<代码>网格栏间隙< /代码>属性来添加它们之间的空间。一个可能要考虑添加<代码> dt{Grand列：1 }和<代码> DD{Grand列：2 }，以确保元素位于正确的列中。如果您有多个

dd

到一个

dt

（这是允许的），那么它就变得相关了。@RoToRa对不起，我被这弄糊涂了。这看起来是个好主意，也很有意义，但当我用它更新我的代码笔，并添加第二个

dd

时，它仍然会出现在第一列-。我做错了吗？还是我读错了你的评论？你的语法错了。在普通CSS中不能嵌套这样的规则。您需要将

dt

和

dt

规则移动到

.grid

规则之外，或者通过单击“CSS”标题旁边的cog图标并选择预处理器来使用预处理器，如SCSS。@RoToRa hahah抱歉：facepalm:。我正在使用的实际代码是SCS，我忘了在代码笔中切换回来。更新了它，看起来很棒！谢谢我也会更新答案