comment éviter une nouvelle ligne avec la balise p?

104

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

html css tags Josh
la source
voulez créer un carrousel avec une image et du texte
Josh
19
@Nishant: Utilisez ensuite, par exemple, <span>. <p>est destiné aux paragraphes.
Steve Harrison
6
@Nishant: Lorsque vous devez forcer une balise à se comporter d'une certaine manière (comme la créer display: inline;plutôt que display: block;), c'est une bonne indication que vous utilisez peut-être la mauvaise balise ...
Steve Harrison

Réponses:

172

Utilisez la display: inlinepropriété CSS.

Idéal: dans la feuille de style:

#container p { display: inline }

Situation mauvaise / extrême: en ligne:

<p style="display:inline">...</p>
Doug Neiner
la source
12
Corrigez le CSS, mais les garçons dans les commentaires de la question d'origine ont raison ... demandez-vous pourquoi vous feriez cela ... SPANsemble mieux adapté à cette situation.
one.beat.consumer
5
La portée est la même et ne passe pas sur une nouvelle ligne! comme one.beat.consumerdit
Anicho
+1 Utile pour économiser de l'espace sur les appareils mobiles à l'aide de requêtes multimédias réactives: D
gef
Je travaille dans angularJS, et j'avais besoin de répéter un paragraphe avec 'ng-repeat', cela fonctionnait parfaitement. Et Span ne m'a donné qu'une erreur.
sch
On aurait besoin de cela pour un programme dont la sortie utilise des balises <p> comme séparateurs. Django par exemple.
Jim Paul
69

La <p>balise de paragraphe 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 <p>balise de manière incorrecte. Peut-être que la <span>balise correspond mieux à ce que vous voulez réaliser ...?

Steve Harrison
la source
1
Cela devrait être la réponse acceptée. Pas de réponse directe à la question, mais probablement la meilleure solution au problème.
Fr4nc3sc0NL
5

quelque chose comme:

p
{
    display:inline;
}

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

John Boker
la source
2

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>
Développer l'extrait

Ronnie Royston
la source