[英]Left and Right align text on the same line
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. 显示 :一
hr
应显示在文本下方,宽度应与覆盖整个div宽度的另一个宽度相同。
You can easily maintain the alignment, and replace the <hr>
elements by using the div's border, looks a bit cleaner: 您可以轻松地保持对齐,并使用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>
The floats need to be cleared. 浮标需要清除。 There are many different ways to do this.
有很多不同的方法可以做到这一点。 One of them is:
其中之一是:
<hr style="clear: both"/>
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>
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>
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/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.