HTML中如何使链接与后续段落内容显示在同一行？

嘿，这个问题太常见啦！原因很简单：<p>标签是HTML里的块级元素，默认会独占一整行空间，所以才会和前面的链接自动换行。给你几个实用的解决办法，按需选就行：

方法1：把<p>换成<span>标签 #

<span>是行内元素，不会独占一行，完美适配这种同行显示的需求，代码示例：

<a href="https://www.google.com" target="_blank">Click to go to google</a> <span>This should appear next to the link, instead of on the next line</span>

方法2：用CSS修改<p>的显示模式 #

如果你不想改动标签（比如需要保留<p>的段落语义），可以通过CSS把它改成行内/行内块元素：

行内样式（快速测试用） #

<a href="https://www.google.com" target="_blank">Click to go to google</a> 
<p style="display: inline;">This should appear next to the link, instead of on the next line</p>

类选择器（更规范，适合多元素复用） #

<style>
.inline-paragraph {
  display: inline;
  /* 要是需要设置宽高、内边距这些属性，可以换成 display: inline-block; */
}
</style>
<a href="https://www.google.com" target="_blank">Click to go to google</a> 
<p class="inline-paragraph">This should appear next to the link, instead of on the next line</p>

方法3：直接移除<p>标签（最简单的方案） #

如果这段内容不需要段落的语义，直接把<p>标签去掉，内容放在链接后面就行：

<a href="https://www.google.com" target="_blank">Click to go to google</a> This should appear next to the link, instead of on the next line

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