提问人：almightysosa 提问时间：11/29/2022 最后编辑：almightysosa 更新时间：11/29/2022 访问量：398
我需要构建html css键值对
I need to structure html css Key value pair
问：
如果您有此 HTML：
<dl class="test">
<dt>key:</dt>
<dd>value</dd>
<dt>keyyy:</dt>
<dd>valueeeee</dd>
</dl>
你怎样才能完成和组织，使内容看起来像
key: value
key: value
尝试过#1： 使用 flex 但它不起作用，因为我只能使用顶部显示的 HTML，如果我不通过一些 css hack 来添加，我将无法添加任何 div 之类的东西，因为代码来自另一个地方。
尝试过#2： 使用网格，但结果如下所示：https://jsfiddle.net/fo6ckghd/2/
键和值之间的空间太大，如果每个键值对的长度不同，它就不会变得很好。
尝试#3：
dl
dt
display: inline-block;
dd
display: contents;
这也没有用，因为在第一个 key：value 之后 第二个是同一行，我尝试过 ：：before ：：after 添加新行，但未成功。
答：
1赞
user3425506
11/29/2022
#1
这个怎么样？？
我不太明白，但规则在元素后添加了换行符（从 https://www.educative.io/answers/how-to-add-a-line-break-using-css 中窃取dd::afterdd)
dd, dt {
display: inline;
margin: 0;
}
dd::after{
content: "\a";
white-space: pre;
}<dl class="test">
<dt>key:</dt>
<dd>value</dd>
<dt>keyyy:</dt>
<dd>valueeeee</dd>
</dl>评论
0赞
almightysosa
11/29/2022
它没有用：/不知道为什么
0赞
EmSixTeen
12/12/2022
如果答案不适合您，将答案标记为已接受有点奇怪。🙂
1赞
EmSixTeen
11/29/2022
#2
你已经是你的容器了，你不需要任何额外的东西来让 flex 工作。dldiv
如果您使用 flex 并希望您的列对齐，则需要为第一列指定一个特定的宽度，例如 25%。
如果您使用 flex 并且不介意列是否对齐，而只是担心它们彼此相邻，那么这没问题。
如果使用网格，则可以轻松对齐列，其中一个列设置为内容的最大宽度，另一个设置为填充两列集中剩余的可用空间。
/**
* Relevant styles
*/
.flex {
border: 2px solid pink;
padding: 1em;
margin: 0;
gap: .5em 1em;
display: flex;
flex-wrap: wrap;
}
/* Don't grow, always be 25% */
.flex--even dt {
flex: 0 0 25%;
}
/* Don't grow, but be equal to the content's max-width */
.flex--uneven dt {
flex: 0 0 max-content;
}
/* Grow with flex, but never be more than 66% */
.flex>dd {
flex: 1 0 66%;
}
/*
First columns will always be the width of the one
with most content, then the second column will
fill the space
*/
.grid {
border: 2px solid lime;
padding: 1em;
margin: 0;
gap: .5em 1em;
display: grid;
grid-template-columns: max-content 1fr;
}
.grid dt {
margin: 0;
}
/**
* Base stuff
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
display: grid;
place-items: center;
background: #ffcc33;
}
main {
max-width: 75vw;
background: white;
padding: 2em;
display: grid;
gap: 1.5em;
}
dl:not(.unstyled)>* {
border: 1px solid #ffcc3366;
}
dl:not(.unstyled) dd {
display: unset;
margin-inline-start: unset;
}<html>
<body>
<main>
<dl class="unstyled">
<dt>Item One</dt>
<dd>Item Two</dd>
<dt>Item Three</dt>
<dd>Item Four</dd>
</dl>
<dl class="flex flex--even">
<dt>Item One</dt>
<dd>Item Two</dd>
<dt>Item Three</dt>
<dd>Item Four</dd>
</dl>
<dl class="flex flex--uneven">
<dt>Item One</dt>
<dd>Item Two</dd>
<dt>Item Three</dt>
<dd>Item Four</dd>
</dl>
<dl class="grid">
<dt>Item One</dt>
<dd>Item Two</dd>
<dt>Item Three</dt>
<dd>Item Four</dd>
</dl>
</main>
</body>
</html>另请参阅此处，其中样式是在 SASS 中完成的。
评论