左右对齐同一行上的文本

Following is displaying two horizontal lines above the text. What I need is one horizontal line above the text and one below the text:

以下是在文本上方显示两条水平线。我需要的是文本上方的一条水平线和文本下方的一条水平线:

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

Display: One hr should display below the text and should be same width as the other one covering the entire div width.

显示:一小时应显示在文本下方,宽度应与覆盖整个div宽度的另一小时相同。

5 个解决方案

#1

You can easily maintain the alignment, and replace the <hr> elements by using the div's border, looks a bit cleaner:

您可以轻松地保持对齐,并使用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>

#2

The floats need to be cleared. There are many different ways to do this. One of them is:

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

<hr style="clear: both"/>

#3

Please try the following:

请尝试以下方法:

.alignleft {
    float: left;
}

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

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

#4

Use a clear:both after the text. Like so:

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

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

#5

First, float doesn't do what you think it does.

首先,浮动不会像你想象的那样做。

Second, try this:

其次,试试这个:

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

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

functional example: https://jsfiddle.net/catbadger/0d144khk/1/

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

#1