如何使p标签与span标签在同一行显示？附相关代码

嘿，这问题很常见～你遇到的核心问题是 <p> 标签默认是块级元素，浏览器会自动给它分配一整行的空间，所以它会和后面的 <span>（行内元素）分行显示。要解决这个，只需要修改 <p> 的显示模式就行，下面给你两种靠谱的方法：

方法1：使用 display: inline-block（推荐） #

这个方法能保留你给 <p> 设置的 width、margin 等样式，同时让它和行内元素同行：

#h3 {
  padding: 0;
  margin: 0;
  width: 268px;
  margin-left: 116px;
  font-size: 18px;
  color: #369;
  font-weight: bold;
  display: inline-block; /* 新增这一行，让p变成行内块元素 */
  vertical-align: middle; /* 可选：让元素垂直居中对齐，优化视觉效果 */
}
#heart {
  color: grey;
  font-size: 15px;
  margin-left: 210px;
}
.close {
  font-size: 18px;
  margin-left: 26px;
  padding: 0px;
}

对应的HTML无需修改：

<p id="h3"> thiss is me </p>
<span><i class="fa fa-heart" id="heart"></i><span class="close">x</span></span>

方法2：使用 display: inline #

如果你不需要 <p> 的宽高设置，可以用这个方案，它会让 <p> 完全变成行内元素，和文字、span等自然混排：

#h3 {
  padding: 0;
  margin: 0;
  /* 注意：行内元素不支持width属性，这个样式会失效，需要的话就用方法1 */
  margin-left: 116px;
  font-size: 18px;
  color: #369;
  font-weight: bold;
  display: inline; /* 新增这一行，让p变成纯行内元素 */
}

补充小提示 #

• inline-block 是更灵活的选择，兼顾了块级元素可设置宽高的特性，又能像行内元素一样同行显示；
• 如果元素垂直对齐有偏差，调整 vertical-align 的值（比如 top/bottom）就能搞定。

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