左右のテキストを同じ行に配置

Question

テキストの上に2本の水平線が表示されています。私に必要なのは、テキストとテキストの下1以上の1つの水平ラインである：

.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>要素を置き換えることができます：

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

Answer 2

フロートをクリアする必要があります。これを行うにはさまざまな方法があります。そのうちの一つは、次のとおりです。

<hr style="clear: both"/>

Answer 3

は明確に使用します。両方のテキストの後に。これと同じように：

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

次のことを試してください：

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

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/