将 div 标签与 <p> 标签内联

Question

对于我的网站，我一直想添加一个Facebook关注按钮。我希望它看起来像这样：

在Facebook上关注我们：[关注按钮]

请注意，按钮的<p>标签和<div>标签应该是内联的。

我正在使用以下代码：

<p>Follow us on Facebook:</p><div id="follow-button"></div>

当使用该代码时，其无法正确渲染，"关注"按钮总是显示在 <p> 标签下方。

- Mihir Chaturvedi

---

<p>和<div>都是块级元素。为什么不使用两个<span>呢？ - Felix Kling

Answer 1

您需要将两个元素都设置为内联元素：

您的html代码：

<p> Follow us on Facebook: </p>
<div id="follow-button"> Button </div>

你的CSS：

p { display: inline; }
div { display: inline; }

（请注意：如果您希望它们的行为类似于块元素，您也可以将它们设置为“inline-block”）

- FDbomb

Answer 2

因为

始终占据100%的宽度。为什么不使用代替

？

- rohit raut

Answer 3

将您的代码更改如下：

<p style="display:inline-block;">Follow us on Facebook:</p><div style="display:inline-block;" id="follow-button">btn</div>

- Mostafa Khodakarami

Answer 4

你可以使用这一行代码

<p style="display:inline"> follow us on <div id="follow-button"    style="display:inline"> Button </div> </p>

- user4963716