hoe vermijd je een nieuwe regel met p tag?

Hoe kan ik op dezelfde lijn blijven terwijl ik met de <p>-tag werk?


Antwoord 1, autoriteit 100%

Gebruik de display: inlineCSS-eigenschap.

Ideaal: in de stylesheet:

#container p { display: inline }

Slechte/extreme situatie: Inline:

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

Antwoord 2, autoriteit 43%

De <p>alinea-tag is bedoeld voor het specificeren van alinea’s met tekst. Als u niet wilt dat de tekst op een nieuwe regel begint, raad ik u aan de tag <p>verkeerd te gebruiken. Misschien past de tag <span>beter bij wat u wilt bereiken…?


Antwoord 3, autoriteit 15%

Ik kwam dit tegen voor css

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

via vergelijkbare stackoverflow-vraag


Antwoord 4, autoriteit 4%

zoiets als:

p
{
    display:inline;
}

in je stylesheet zou het voor alle p-tags doen.


Antwoord 5, autoriteit 2%

Flexbox werkt.

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

Other episodes