左右对齐同一行上的文本

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

您可以轻松维护对齐方式，并使用div的边框替换<hr>元素，看起来更清晰：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

浮标需要清除。有很多不同的方法可以做到这一点。其中之一是：

1 2 3 4 5 6 7 8 9 10 11 12

Answer 3

请尝试以下方法：

＆＃13;

＆＃13;

.alignleft {
    float: left;
}

.alignright {
    float: right;
}
hr {
clear:both;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

使用明确：在文本之后。像这样：

<style>
.alignleft {
    float: left;
}

.alignright {
    float: right;
}
.clear{
clear:both;
}
</style>
<div style="width:800px;">
    <hr />
    <p class="alignleft">To Left: 1024-0038</p>
    <p class="alignright">To Right: 01-15-131194</p>
    <div class="clear"></div>
    <hr />
</div>

Answer 5

首先，浮动不会按照你的想法做到。

其次，试试这个：

  #container{
      width:100%
      }
    .alignleft {
      width:50%;
      float:left;
      text-align: left;
    }

    .alignright {
      width:50%;
      float:left;
      text-align: right;
    }
   hr{
     clear:both;
    }

功能示例：https://jsfiddle.net/catbadger/0d144khk/1/