如何防止被邊框包圍的文本突破到下一行？

Question

我試圖編寫一個小型網頁（對於一個班級，而不是真實的），我遇到了一個奇怪的問題。有一些文字是在框中。我將代碼放在文本的邊框上，但是會導致換行並進入下一行。下面的代碼是什麼樣子：

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

現在，每當我運行它，在地址環繞箱是下一行，而不是旁邊的字「地址：」我想不通爲什麼。我怎樣才能阻止這一點，並把它放在同一條線上？

Answer 1

嘗試

#div { 
    white-space: nowrap; 
} 

Answer 2

這是因爲<p>是block element。因此它總是從一條新線開始。嘗試使它成爲一個inline-block元素，像這樣：

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

Fiddle