如何让<p>标签与<h3>标签在同一行显示？

没问题，我来帮你搞定这个需求！你想要让<p>标签和<h3>标签处于同一行、保持各自字体样式且不嵌套，核心问题是这两个标签默认都是块级元素，会自动换行，我们只需要调整它们的CSS属性并优化结构就能实现。

调整思路 #

1. 将<p>和<h3>设置为inline-block，让它们能在同一行排列，同时保留各自的块级特性（比如可设置内外边距）。
2. 清除两个标签默认的上下外边距，避免不必要的间距干扰布局。
3. 给两个元素添加垂直对齐属性，让视觉效果更协调。
4. 确保整个类别+标题区域都能作为可点击链接，同时符合HTML规范。

修改后的代码示例 #

<a href="/sharp/posts/{{ $day_qsts_3->id }}" style="display: inline-block; text-decoration: none;">
  <p style="display: inline-block; margin: 0; vertical-align: middle;">{{$data->getcategory($data->id)}}</p>
  <h3 style="display: inline-block; margin: 0 0 0 8px; vertical-align: middle;">{{$day_qsts_3->title}}</h3>
</a>

代码细节说明 #

• display: inline-block：让<a>、<p>、<h3>都能在同一行展示，同时<a>可以合法包裹这两个元素，确保整个区域可点击。
• margin: 0：清除<p>和<h3>默认的上下外边距，避免布局出现多余空隙。
• margin-left: 8px：给<h3>添加左边距，让类别和标题之间有适当留白，提升可读性。
• vertical-align: middle：让两个元素在垂直方向上居中对齐，视觉上更整齐。
• text-decoration: none：可选属性，用来去掉链接默认的下划线，如果你需要下划线可以直接删除。

如果后续需要批量调整样式，推荐把CSS抽离到外部样式表或<style>标签中，代码会更整洁易维护：

.category-link {
  display: inline-block;
  text-decoration: none;
}
.category-tag {
  display: inline-block;
  margin: 0;
  vertical-align: middle;
  /* 自定义<p>的字体样式，比如：font-size: 14px; color: #666; */
}
.post-title {
  display: inline-block;
  margin: 0 0 0 8px;
  vertical-align: middle;
  /* 自定义<h3>的字体样式，比如：font-size: 18px; color: #333; */
}

对应的HTML简化为：

<a href="/sharp/posts/{{ $day_qsts_3->id }}" class="category-link">
  <p class="category-tag">{{$data->getcategory($data->id)}}</p>
  <h3 class="post-title">{{$day_qsts_3->title}}</h3>
</a>

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