як уникнути нового рядка з тегом p?

104

Як я можу залишатися на одній лінії під час роботи з тегом?

html css tags

— Джош
джерело

хочете створити карусель із зображенням та текстом

— Джош

19

@Nishant: Потім з допомогою, скажімо, . призначений для абзаців.

— Стів Гаррісон

6

@Nishant: Коли вам доведеться змусити тег поводитись певним чином (наприклад, зробити його, display: inline;а не зробити display: block;), це є хорошим свідченням того, що ви можете використовувати неправильний тег ...

— Стів Харрісон

172

Використовуйте display: inlineвластивість CSS.

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

#container p { display: inline }

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

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

— Дуг Нейнер
джерело

12

Правильний CSS, але хлопці в оригінальних коментарях до запитання мають рацію ... запитайте себе, чому б ви зробили це ... SPANздається, краще підходить для цієї ситуації.

— one.beat.consumer

5

Span - такий самий і не переходить на нову лінію! як one.beat.consumerсказано

— Анічо

+1 Корисно для економії місця на мобільних пристроях, використовуючи відповіді на запити медіа: D

— gef

Я працюю в angularJS, і мені потрібно було повторити абзац з 'ng-repeat', це спрацювало чудово. І Спан тільки помилився.

— sch

Це знадобиться для роботи з програмою, яка на виході використовує теги як роздільники. Наприклад, форми Джанго.

— Джим Пол

69

Цей тег призначений для вказівки абзаців тексту. Якщо ви не хочете, щоб текст починався з нового рядка, я б запропонував використовувати тег неправильно. Можливо, тег більше відповідає тому, що ви хочете досягти ...?

— Стів Гаррісон
джерело

1

Це має бути прийнятою відповіддю. Немає прямої відповіді на питання, але, мабуть, краще рішення проблеми.

— Fr4nc3sc0NL

19

Я натрапив на це за css

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

через аналогічне запитання stackoverflow

— Ackushiw
джерело

1

Мені не потрібен перелив: приховано. Спасибі

— StinkyCat

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>

Розгорніть фрагмент

— Ронні Ройстон
джерело