Как предотвратить перемещение текста, окруженного границей, на следующую строку?

Question

Я пытаюсь запрограммировать небольшую веб-страницу (для класса, а не для реального), и я сталкиваюсь с какой-то странной проблемой. В коробке есть текст. Я помещаю код в рамку вокруг текста, но он вызывает разрыв строки и переходит к следующей строке. Вот то, что код выглядит следующим образом:

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

Теперь всякий раз, когда я запускаю его, коробка вокруг адреса на следующей строке, а рядом со словом «Address:» и я не могу понять, почему. Как я могу остановить это и получить его на одной линии?

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