html - 将值显示到 block 中

Question

我有这些值，我想将其显示为类似于表的键值对:

<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;
    }
  }
}

我想用而不是

我试过这个:

API 尝试详细信息

<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>

我得到了这个视觉结果:

你能给出一些如何修复这个填充的建议吗？

我想得到他的视觉效果:

Answer 1

虽然实际表格在这里非常有用，并且网格和 flexbox 是有趣的选项，但您实际上已经修复了大部分布局。它只是因为<pre>而中断默认是 block 元素。设置其 display至 inline或 inline-block应该可以解决您的问题。

请注意， block 元素总是试图占据整个水平空间。

CSS:

pre {
    display: inline;
}