dl、dt 和 dd 元素的 CSS，使它们显示为居中并作为键排列：值答案

【问题标题】：CSS for dl, dt and dd elements so that they appear centered and lined up as key: valuedl、dt 和 dd 元素的 CSS，使它们显示为居中并作为键排列：值
【发布时间】：2022-01-25 19:33:00
【问题描述】：

我想要这样列出键/值：

Username: myhandle
Password: lalalalalala
     Key: somevalue

我为此使用了dl、dt 和dd html5 元素，并尝试使用CSS 来正确显示这些元素。我已经这样做了： http://jsfiddle.net/njm84/1/

看起来不错，除了我必须为左侧设置 50% 的宽度。问题是如果值很长，即使所有内容都向左移动，即使有足够的空间，它也会不必要地被切断。例如：

                                    a: some-long-value-that-extends-far-to-the-right-even-though-there's-lots-of-space-on-left
                                    b: another-value-to-the-right-even-though-there's-lots-of-space-on-left

理想情况下，它对元素使用一种表格布局 CSS，以便将上面的内容向左移动，以便一切都适合。诀窍是我不能添加任何额外的 html 元素。所以我不能用<div class="table"> 包裹dl 元素。

更新：这是另一个版本的 jsfiddle，如果其中一个值很长，我希望键/值列表看起来像这样： http://jsfiddle.net/njm84/4/

我必须手动更改宽度（分别为 15%、5% 和 80%）来解释那个长值，否则它会被包裹。

【问题讨论】：

请用你的“非”工作示例更新 jsfiddle，这样我们都可以直观地看到发生了什么
将一长串文本放入您的小提琴似乎做了它应该做的事情：换行到下一行。
@Diodeus - 换行到下一行并不是我想要的
@eberswine - 我更新了问题以包括值很长的情况。
使用实际的表格可能会更好。

标签： html css layout

【解决方案1】：

从你的问题中我不能完全确定你在寻找什么，但接近 this 或 this？这是我使用的 CSS：

body {
    display: table;
    margin: 0 auto;
}
dt {
    text-align: right;
    font-weight: bold;
}
dt:after {
    content: ":";
}
dd {
    text-align: left;
    padding-left: 1em;
}
dl {
    display: table-row;
}
dt, dd {
    display: table-cell;
}

一些注意事项：这取决于是否有一个可以应用display: table 的父元素，它不一定是body，但这是您的JSFiddle 中唯一可用的元素。另一件会破坏它的事情是，如果您有任何标记，其中一个 dt 有多个 dd 元素。

【讨论】：

这正是我想要的。问题是，我不能把整个body 做成一张桌子。至少我认为这可能会导致我网页中的其他元素出现问题？
@at。是的，然后就像我说的那样，您需要其他东西作为包装元素，否则各种 dt 和 dd 将无法对齐。如果您只有body，那么您可以尝试一下，看看有什么问题，解决这些问题可能比为这个位找到不同的工作方法更容易。
没关系，但不适用于包含多个 dt 和 dl 子级的单个 dl 父级的常见情况。

【解决方案2】：

另一种方法是使用flex：

dl {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  margin: 0;
  word-break: break-word;
}

dt {
  width: 50%;
  text-align: right;
}

dt:after {
  content: ":";
}

dd {
  box-sizing: border-box;
  width: 50%;
  padding-left: 1rem;
}

http://jsfiddle.net/0jt2uz79/1/

注意：此示例使用多个 dt 和 dd 包含在一个 dl 中 - 如果数据彼此相关（如原始“登录详细信息”示例中所示），则更具语义。这是一个定义列表，它允许多个项目。

【讨论】：