Question

对齐同一行上的2 <p>个元素

我想将两个<p>元素对齐在同一行，但是将一个元素对齐到右边的另一行。

＆＃13;

<p style="text-align:left">Copyright &copy; {$date_year} {$companyname}. All Rights Reserved.</p><p style="text-align:right"><a href="url">Terms of Service</a> | <a href="url">Privacy Policy</a> | <a href="url">Contact Us</a></p>

＆＃13;

当我尝试这样做时，第二个会掉到一个新线上，所以它显示在右侧，但在我想要它的线下。

Answer 1

将style="text-align:left"替换为style="float: left" 使用以下代码

<p style="float: left">Copyright &copy; {$date_year}
    {$companyname}. All Rights Reserved.</p>
<p style="float: right">
    <a href="url">Terms of Service</a> | <a href="url">Privacy Policy</a> |
    <a href="url">Contact Us</a>
</p>

Answer 2

您可以将float属性用于同一行...根据需要调整widht。

<p style="float: left; width: 50%;">Copyright &copy; {$date_year} {$companyname}. All Rights Reserved.</p>
<p style="float: left; width: 50%;"><a href="url">Terms of Service</a> | <a href="url">Privacy Policy</a> | <a href="url">Contact Us</a></p>

Answer 3

＆＃13;

.right {
    float:right;
    width: 50%
}
.left{
    float:left;
    width: 50%
}

＆＃13;

<p class="left">Copyright &copy; {$date_year} {$companyname}. All Rights Reserved.</p>
<p class="right">
   <a href="url">Terms of Service</a> | <a href="url">Privacy Policy</a> |
    <a href="url">Contact Us</a>
</p>

＆＃13;

在同一行上对齐2个<p>元素

3 个答案: