dl, dt和dd元素的CSS，使它们看起来居中并排列为key: value

Question

我希望键/值像这样列出:

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元素。

UPDATE:这是jsfiddle的另一个版本，它显示了如果其中一个值很长，我想要的键/值列表的样子:http://jsfiddle.net/njm84/4/

我必须手动更改宽度(为15%，5%和80%)来考虑这个长值，否则它会自动换行。

Answer 1

从你的问题中我不完全确定你在寻找什么，但接近这个或这个?下面是我使用的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中唯一可用的。另一个会破坏它的事情是，如果你有任何标记，其中有多个dd元素为一个dt。

Answer 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中-如果数据彼此相关(如您原始的"登录详细信息")，则更具语义性;例子)。这是一个定义列表，它允许多个条目