将值显示到块中
将值显示到块中
提问于 2019-04-26 05:15:44
我有这些值，我希望将它们显示为类似于表的键-值对：
<div class="element-box">
<div class="details-wrapper">
<p><b class="label">Remote IP</b>{{apiattempt.remote_ip}}</p>
<p><b class="label">Raw Request</b>
<pre>
{{apiattempt.raw_request | xmlBeautyfier }}
</pre>
<p><b class="label">Raw Response</b>{{apiattempt.raw_response | xmlBeautyfier }}</p>
</div>
</div>CSS代码：
details-wrapper {
padding: 20px 0;
h4 {
margin-bottom: 0;
}
.activity {
margin-bottom: 20px;
font-size: .8em;
color: #9e9e9e;
}
p {
.label {
display: inline-block;
width: 100px;
margin-right: 10px;
}
}
}我想使用而不是
我试过这个：
接口尝试详情
<div class="element-box">
<div class="details-wrapper">
<div><b class="label">Remote IP</b>{{apiattempt.remote_ip}}</div>
<div><b class="label">Raw Request</b><pre>{{apiattempt.raw_request | xmlBeautyfier }}</pre></div>
</div>
</div>我得到了这个可视化的结果：
你能给我一些建议如何修复这个垫子吗？
我想得到他的视觉结果：
回答 1
Stack Overflow用户
发布于 2019-04-26 05:35:56
虽然实际的表格在这里真的很有用，而grid和flexbox是有趣的选项，实际上你已经修复了大部分布局。它只是中断，因为<pre>在默认情况下是一个块元素。将其display设置为inline或inline-block应该可以解决您的问题。
请注意，块元素总是试图占据整个水平空间。
CSS：
pre {
display: inline;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55857741
复制相关文章
相似问题
腾讯云开发者
