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

105

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

html css tags Джош
источник
хотите создать карусель с изображением и текстом
Джош
19
@Nishant: Затем с помощью, скажем, <span>. <p>предназначен для абзацев.
Стив Харрисон,
6
@Nishant: Когда вам нужно заставить тег вести себя определенным образом (например, сделать его display: inline;вместо display: block;), это хороший признак того, что вы, возможно, используете неправильный тег ...
Стив Харрисон

Ответы:

173

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

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

#container p { display: inline }

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

<p style="display:inline">...</p>
Дуг Найнер
источник
12
Правильный CSS, но ребята в исходных комментариях к вопросу правы ... спросите себя, зачем вы это делаете ... SPANкажется, лучше подходит для этой ситуации.
one.beat.consumer
5
Промежуток такой же и не переходит на новую строку! как one.beat.consumerсказано
Anicho
+1 Полезно для экономии места на мобильных устройствах с помощью
адаптивных
Я работаю в angularJS, и мне нужно было повторить абзац с помощью ng-repeat, это отлично сработало. И Span только выдал мне ошибку.
sch
Это может понадобиться при работе с программой, вывод которой использует теги <p> в качестве разделителей. Например, формы Django.
Джим Пол,
69

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

Стив Харрисон
источник
1
Это должен быть принятый ответ. Нет прямого ответа на вопрос, но, вероятно, лучшее решение проблемы.
Fr4nc3sc0NL
5

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

p
{
    display:inline;
}

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

Джон Бокер
источник
2

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>
Развернуть фрагмент

Ронни Ройстон
источник