如何在不修改<h>和<p>标签的情况下实现标题与段落同行显示

要让<h1>和<p>标签的内容显示在同一行，且不修改标签本身的内容，只需通过CSS改变它们的布局特性即可，以下是两种常用方法：

方法1：使用Flex布局 #

给父容器（这里是<body>）设置flex布局，让子元素横向排列：

body {
  display: flex;
  align-items: center; /* 让两个元素垂直居中对齐 */
  gap: 0.5rem; /* 可选：设置两个元素之间的间距 */
}

方法2：将元素设为inline-block #

把<h1>和<p>从默认的块级元素改为inline-block，使它们能在同一行显示：

h1, p {
  display: inline-block;
  margin: 0; /* 清除默认的外边距，避免不必要的换行或间距 */
  vertical-align: middle; /* 确保垂直方向对齐一致 */
}

两种方法都无需修改<h1>和<p>标签内的内容，添加上述CSS代码后，页面就能实现你期望的同一行显示效果。

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