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元素。所以我无法用dl包装<div class="table">元素。

更新：这是jsfiddle的另一个版本，它显示了我想要的键/值列表，如果其中一个值非常长： http://jsfiddle.net/njm84/4/

我不得不手动更改宽度（至15％，5％和80％）以考虑该长值，否则它将被包裹。

Answer 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中唯一可用的元素。另一件会破坏它的是，如果你有一个标记，其中一个dd有多个dt个元素。

用于dl，dt和dd元素的CSS，以便它们显示为居中并排列为键：值

1 个答案: