comment éviter une nouvelle ligne avec la balise p?

104

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

html css tags

— Josh
source

voulez créer un carrousel avec une image et du texte

— Josh

19

@Nishant: Utilisez ensuite, par exemple, . 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

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
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 comme séparateurs. Django par exemple.

— Jim Paul

69

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

— Steve Harrison
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

19

Je suis tombé sur ça pour css

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

via une question stackoverflow similaire

— ackushiw
source

1

Je n'avais pas besoin du débordement: caché. Merci

— StinkyCat

5

quelque chose comme:

p
{
    display:inline;
}

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

— John Boker
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
source