0

我想要这样列出键/值：

Username: myhandle
Password: lalalalalala
     Key: somevalue

我为此使用dl,dt和ddhtml5 元素，并试图提出 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%）来解释那个长值，否则它会被包裹起来。

4

2 回答 2

0

我不能从你的问题中完全确定你在寻找什么，但接近这个或这个？这是我使用的 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。

于 2013-01-03T00:05:46.940 回答
0

另一种方法是使用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- 如果数据彼此相关（如原始“登录详细信息”示例中所示），则更具语义。这是一个定义列表，它允许多个项目。

于 2022-01-25T11:33:00.603 回答