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


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

5 73

5 ответов:

использовать display: inline свойства CSS.

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

#container p { display: inline }

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

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

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

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

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

через подобный вопрос stackoverflow

что-то типа:

p
{
    display:inline;
}

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

обрабатывает.

.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>