jak uniknąć nowej linii ze znacznikiem p?

105

Jak mogę pozostać na tej samej linii podczas pracy z tagiem?

html css tags

— Josh
źródło

chcę stworzyć karuzelę z obrazem i tekstem

— Josh

19

@Nishant: Następnie za pomocą powiedzmy . jest przeznaczony dla akapitów.

— Steve Harrison,

6

@ Nishant: Kiedy musisz wymusić zachowanie tagu w określony sposób (na przykład tworzenie go display: inline;zamiast display: block;), jest to dobra wskazówka, że możesz używać niewłaściwego tagu ...

— Steve Harrison

173

Użyj display: inlinewłaściwości CSS.

Idealnie: w arkuszu stylów:

#container p { display: inline }

Zła / ekstremalna sytuacja: w tekście:

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

— Doug Neiner
źródło

12

Poprawny CSS, ale chłopcy w oryginalnych komentarzach do pytania mają rację ... zadaj sobie pytanie, dlaczego to zrobiłeś ... SPANwydaje się lepiej pasować do tej sytuacji.

— one.beat.consumer

5

Rozpiętość jest taka sama i nie przechodzi do nowej linii! jak one.beat.consumerpowiedział

— Anicho

+1 Przydatne do oszczędzania miejsca na urządzeniach mobilnych za pomocą responsywnych zapytań o media: D

— gef,

Pracuję w angularJS i musiałem powtórzyć akapit z „ng-powtórzyć”, to działało idealnie. Span podał mi tylko błąd.

— sch,

Byłoby to potrzebne w przypadku programu, którego wyjście używa tagów jako separatorów. Na przykład formularze Django.

— Jim Paul

69

Znacznik akapitu służy do określania akapitów tekstu. Jeśli nie chcesz, aby tekst zaczynał się w nowej linii, sugeruję nieprawidłowe użycie tagu. Być może tag bardziej pasuje do tego, co chcesz osiągnąć ...?

— Steve Harrison
źródło

1

To powinna być akceptowana odpowiedź. Brak bezpośredniej odpowiedzi na pytanie, ale prawdopodobnie lepsze rozwiązanie problemu.

— Fr4nc3sc0NL

19

Natknąłem się na to w przypadku css

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

za pomocą podobnego pytania o przepełnienie stosu

— Ackushiw
źródło

1

Nie potrzebowałem przelewu: ukryty. Dzięki

— StinkyCat

5

coś jak:

p
{
    display:inline;
}

w twoim arkuszu stylów zrobiłoby to dla wszystkich znaczników p.

— John Boker
źródło

2

Flexbox działa.

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

Rozwiń fragment

— Ronnie Royston
źródło