在同一行上左右对齐文本

Question

接下来是在文本上方显示两条水平线。我需要的是在文本上方的一条水平线，在文本下方的一条水平线：

.alignleft {
  float: left;
}

.alignright {
  float: right;
}

<div style="width:800px;">
  <hr />
  <p class="alignleft">To Left: 1024-0038</p>
  <p class="alignright">To Right: 01-15-131194</p>
  <hr />
</div>

显示：一个hr应显示在文本下方，并且宽度应与另一个相同，且应覆盖整个div宽度。

Answer 1

您可以轻松地保持对齐方式，并<hr>使用div的边框替换元素，看起来更干净：

<style>
  div {
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    display: flex;
    justify-content: space-between;
    width: 800px;
  }
</style>
<div>
  <p>To Left: 1024-0038</p>
  <p>To Right: 01-15-131194</p>
</div>