Wie vermeide ich eine neue Zeile mit p-Tag?

104

Wie kann ich bei der Arbeit mit <p>Tags in derselben Zeile bleiben ?

html css tags Josh
quelle
möchte ein Karussell mit einem Bild und Text erstellen
Josh
19
@ Nishant: Dann benutze zum Beispiel , <span>. <p>ist für Absätze gedacht.
Steve Harrison
6
@ Nishant: Wenn Sie ein Tag zwingen müssen , sich auf eine bestimmte Weise zu verhalten (z. B. display: inline;anstatt display: block;es zu erstellen), ist dies ein guter Hinweis darauf, dass Sie möglicherweise das falsche Tag verwenden ...
Steve Harrison

Antworten:

171

Verwenden Sie die display: inlineCSS-Eigenschaft.

Ideal: Im Stylesheet:

#container p { display: inline }

Schlechte / extreme Situation: Inline:

<p style="display:inline">...</p>
Doug Neiner
quelle
11
Richtiges CSS, aber die Jungs in den Kommentaren der ursprünglichen Frage haben Recht ... fragen Sie sich, warum Sie das tun würden ... SPANscheint besser für diese Situation geeignet zu sein.
one.beat.consumer
5
Span ist das gleiche und geht nicht auf eine neue Linie! wie one.beat.consumergesagt
Anicho
+1 Nützlich, um mit reaktionsschnellen Medienabfragen Platz auf Mobilgeräten zu sparen: D
gef
Ich arbeite in angleJS und musste einen Absatz mit 'ng-repeat' wiederholen, das hat perfekt funktioniert. Und Span hat mir nur Fehler gemacht.
sch
Dies wäre erforderlich, wenn es sich um ein Programm handelt, dessen Ausgabe <p> -Tags als Trennzeichen verwendet. Django bildet sich zum Beispiel.
Jim Paul
69

Das <p>Absatz-Tag dient zum Festlegen von Textabschnitten. Wenn Sie nicht möchten, dass der Text in einer neuen Zeile beginnt, würde ich vorschlagen, dass Sie das <p>Tag falsch verwenden. Vielleicht <span>passt das Tag besser zu dem, was Sie erreichen möchten ...?

Steve Harrison
quelle
1
Dies sollte die akzeptierte Antwort sein. Keine direkte Antwort auf die Frage, aber wahrscheinlich die bessere Lösung des Problems.
Fr4nc3sc0NL
19

Ich bin darauf für CSS gestoßen

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

über ähnliche Stackoverflow-Frage

ackushiw
quelle
1
Ich brauchte den Überlauf nicht: versteckt. Danke
StinkyCat
5

etwas wie:

p
{
    display:inline;
}

in Ihrem Stylesheet würde es für alle p-Tags tun.

John Boker
quelle
2

Flexbox funktioniert.

.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>
Erweitern Sie das Snippet

Ronnie Royston
quelle