как избежать новой строки с тегом p?

Question

Как мне остаться на одной линии при работе с тегом <p>?

Answer 1

Используйте свойство display: inline CSS.

Идеально: в таблице стилей:

#container p { display: inline }

Плохая / Чрезвычайная ситуация: Встроенная:

<p style="display:inline">...</p>

Answer 2

Тег абзаца <p> предназначен для указания абзацев текста. Если вы не хотите, чтобы текст начинался с новой строки, я бы посоветовал вам неправильно использовать тег <p>. Возможно, тег <span> более точно соответствует тому, чего вы хотите достичь ...?

Answer 3

Я сталкивался с этим для CSS

span, p{overflow:hidden; white-space: nowrap;}

через аналогичный вопрос stackoverflow

Answer 4

что-то вроде:

p
{
    display:inline;
}

в вашей таблице стилей сделает это для всех тегов p.

Answer 5

Flexbox работает.

.box{
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-content: center;
  align-items:center;
  border:1px solid #e3f2fd;
}
.item{
  flex: 1 1 auto;
  border:1px solid #ffebee;
}

<div class="box">
  <p class="item">A</p>
  <p class="item">B</p>
  <p class="item">C</p>
</div>