如何防止边框包围的文本突破到下一行？

I'm trying to program a small web page (for a class, not for real) and I'm encountering a strange problem. There's some text that is in boxes. I put the code in for a border around the text, but it causes a line break and goes to the next line. Here's what the code looks like:

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

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

Now whenever I run it, the box around the address is on the next line, instead of next to the word "Address:" and I can't figure out why. How can I stop this, and get it on the same line?

现在每当我运行它时,地址周围的框都在下一行,而不是在“地址:”旁边,我无法弄清楚原因。我怎么能阻止它,并把它放在同一条线上?

2 个解决方案

#1

This is because <p> is a block element. Hence it will always start from a new line. Try making it an inline-block element, like this:

这是因为

是一个块元素。因此它总是从一条新线开始。尝试将其设为内联块元素,如下所示:

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

Fiddle

#2

try

#div { 
    white-space: nowrap;
}

#1