如何让两个<p>标签的内容在同一行显示

架构老林

2026-8-28

问题根源

你当前的代码存在3个直接导致换行的问题：

<p>标签默认是块级元素，浏览器默认给块级元素设置display: block，这类元素默认独占父容器整行宽度，相邻两个块级元素会自动上下排列。
CSS选择器不匹配：如果你本来计划给第二个段落单独写右对齐样式，要么HTML里第二个<p>的class没改成b2，要么CSS选择器写错成了p.b2和现有HTML的class="b"不对应，导致样式完全没生效。
CSS语法错误：你写的p.b2样式块末尾缺少闭合大括号}，会导致浏览器解析后续样式时出现异常。

修复方法

推荐用Flex布局实现，代码简洁、适配性强，还能直接实现你代码里暗示的「两端对齐」效果：

给两个<p>标签套一层父容器，给父容器设置flex布局规则
修正CSS选择器匹配问题，补全语法缺失的括号
完整可运行代码如下：

<div class="top-banner">
  <p class='title'><em>WELCOME TO F-DRIVE</em></p>
  <p class='storage-tip'>Free 5GB storage space!</p>
</div>

<style>
.top-banner {
  display: flex;
  /* 两个子元素分别靠左右两端对齐 */
  justify-content: space-between;
  /* 文字垂直方向居中，避免字号不同导致的高低错位 */
  align-items: center;
}
.top-banner p {
  font-size: 32px;
  font-family: bangers, fantasy;
  margin: 0; /* 清除p标签默认的上下外边距 */
}
p.storage-tip {
  margin-left: 20px;
}
</style>

如果你不想额外加父容器，也可以直接把两个p标签改成行内块元素实现同行，注意要消除标签之间的默认文字间隙：

<!-- 两个p标签之间不要留换行空格，或者用注释连接消隙 -->
<p class='title'><em>WELCOME TO F-DRIVE</em></p><!--
--><p class='b'>Free 5GB storage space!</p>

<style>
p.title, p.b {
  display: inline-block;
  font-size:32px;
  font-family: bangers, fantasy;
}
p.b{
  margin-left: 20px;
}
</style>