Wie vermeide ich eine neue Zeile mit p-Tag?

104

Wie kann ich bei der Arbeit mit 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 , . 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

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 -Tags als Trennzeichen verwendet. Django bildet sich zum Beispiel.

— Jim Paul

69

Das 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 Tag falsch verwenden. Vielleicht 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