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

Как я могу оставаться на одной строке во время работы с тегом <p>?

Ответ 1

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

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

#container p { display: inline }

Плохая/экстремальная ситуация: Inline:

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

Ответ 2

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

Ответ 3

Я наткнулся на это для css

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

через fooobar.com/questions/36874/...

Ответ 4

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

p
{
    display:inline;
}

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

Ответ 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>