如何使两个<p>元素同行排列，分别居左和居右？

嘿，这个问题我太熟了！

标签本身是块级元素，默认会独占一整行，所以你直接写两个肯定会换行。给你几个靠谱的解决方案，按现代程度排序，优先推荐第一个：

方案1：使用Flexbox布局（推荐，现代布局首选） #

用一个父容器包裹两个

，通过Flexbox实现自动左右分布，代码简洁还能兼顾响应式：

<div style="display: flex; justify-content: space-between; align-items: center;">
  <p style="margin: 0;">Copyright &copy; {$date_year} {$companyname}. All Rights Reserved.</p>
  <p style="margin: 0;">
    <a href="url">Terms of Service</a> | 
    <a href="url">Privacy Policy</a> | 
    <a href="url">Contact Us</a>
  </p>
</div>

• display: flex：把父容器变成Flex容器
• justify-content: space-between：让两个子元素分别贴紧容器的左右边缘，中间自动填充空白
• align-items: center：让两个

  垂直居中对齐，避免因内容高度不同导致错位

• 去掉

  的默认margin：消除浏览器自带的上下间距，让布局更紧凑

方案2：将

改为行内块元素（兼容旧场景） #

把

的display设为inline-block，让它们能在同一行显示，同时可以设置宽度控制占比：

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

• display: inline-block：将块级元素转为行内块，保留块级元素的特性（比如设置宽高）同时能在一行排列
• 设置width: 49%：避免两个元素总宽度超过100%导致换行，留1%的空白防止内容挤在一起

方案3：使用浮动布局（传统兼容方案） #

这是比较旧的实现方式，适合需要兼容非常老的浏览器场景，但要注意清除浮动：

<p style="text-align:left; float: left; margin: 0;">Copyright &copy; {$date_year} {$companyname}. All Rights Reserved.</p>
<p style="text-align:right; float: right; margin: 0;">
  <a href="url">Terms of Service</a> | 
  <a href="url">Privacy Policy</a> | 
  <a href="url">Contact Us</a>
</p>
<div style="clear: both;"></div> <!-- 必须加这个，清除浮动避免父容器高度塌陷 -->

• float: left/right：让元素分别向左右浮动，脱离文档流
• clear: both：清除浮动影响，确保后续元素正常布局

总结 #

优先选择Flexbox方案，它的代码最简洁，布局灵活性最高，还能轻松适配不同屏幕尺寸，是现在前端布局的标准方案。

内容的提问来源于stack exchange，提问作者Private