html - 如何防止被边框包围的文本断到下一行？

Question

我正在尝试编写一个小网页(用于类，而不是真实的)，但我遇到了一个奇怪的问题。盒子里有一些文字。我将代码放在文本周围的边框中，但它会导致换行并转到下一行。代码如下所示:

Address: <p style="border-style: solid; width: 250px;">
487, street 1, 8th block, Brig, Indiana
<br>
Phone: 555555555
</p>

现在，每当我运行它时，地址周围的框都在下一行，而不是“地址:”一词旁边，我不明白为什么。我怎样才能阻止它，并让它在同一条线上？

Answer 1

这是因为<p>是 block element .因此它总是从一个新行开始。尝试将其设为 inline-block 元素，像这样:

<p style="border-style: solid;
          width: 250px;
          display: inline-block;
          vertical-align: middle;">

Fiddle