将值显示为块

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

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

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

CSS：

pre {
    display: inline;
}