Comment éviter une nouvelle ligne avec la balise 'p'

Question

Comment puis-je rester sur la même ligne tout en travaillant avec la balise <p> ?

Je veux créer un carrousel avec une image et du texte.

Answer 1

Utilisez la propriété CSS display: inline.

Idéal : Dans la feuille de style :

#container p { display: inline }

Mauvaise/Extrême situation : En ligne :

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

Answer 2

La balise de paragraphe <p> est destinée à spécifier des paragraphes de texte. Si vous ne voulez pas que le texte commence sur une nouvelle ligne, je vous suggère d'utiliser la balise <p> incorrectement. Peut-être que la balise <span> correspond mieux à ce que vous voulez réaliser... ?

Answer 3

Je suis tombé sur ça pour CSS,

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

via une question de débordement de pile similaire.

Answer 4

Quelque chose comme

p
{
    display: inline;
}

dans votre feuille de style le ferait pour toutes les balises p.

Answer 5

Flexbox fonctionne.

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