Question Largeur égale au contenu


Je rencontre des problèmes avec la propriété width de CSS. J'ai quelques paragraphes dans un div. Je voudrais rendre la largeur des paragraphes égale à leur contenu, de sorte que leur fond vert ressemble à une étiquette pour le texte. Ce que je reçois à la place, c’est que les paragraphes héritent de la largeur du nœud div div, qui est plus large.

#container {
  width: 30%;
  background-color: grey;
}

#container p {
  background-color: green;
}
<div id="container">
  <p>Sample Text 1</p>
  <p>Sample Text 2</p>
  <p>Sample Text 3</p>
</div>


52
2017-12-04 19:00


origine


Réponses:


Par défaut p les balises sont block éléments, ce qui signifie qu'ils prennent 100% du parent width.

Vous pouvez modifier leur propriété d'affichage avec:

#container p {
   display:inline-block;
}

Mais cela met les éléments côte à côte.

Pour conserver chaque élément sur sa propre ligne, vous pouvez utiliser:

#container p {
   clear:both;
   float:left;
}

(Si vous utilisez float et devez effacer après les éléments flottants, voir ce lien pour différentes techniques: http://css-tricks.com/all-about-floats/)

Démo: http://jsfiddle.net/CvJ3W/5/

modifier 

Si vous optez pour la solution avec display:inline-block mais voulez garder chaque élément dans une ligne, vous pouvez simplement ajouter un <br> tag après chacun:

<div id="container">
  <p>Sample Text 1</p><br/>
  <p>Sample Text 2</p><br/>
  <p>Sample Text 3</p><br/>
</div>

Nouvelle démo: http://jsfiddle.net/CvJ3W/7/


85
2017-12-04 19:04



J'ai défini la largeur en tant que contenu maximal et cela a fonctionné pour moi.

width: max-content;


31
2017-08-03 19:47



Ajouter display: inline-block; au p le style devrait en prendre:

http://jsfiddle.net/pyq3C/

#container p{
    background-color: green;
    display: inline-block;
}

6
2017-12-04 19:03



La solution avec inline-block vous oblige à insérer <br> après chaque élément.
La solution avec float vous oblige à envelopper tous les éléments avec "clearfix" div.

Une autre solution élégante consiste à utiliser display: table pour les éléments.

Avec cette solution, vous n'avez pas besoin d'insérer des sauts de ligne manuellement (comme avec inline-block), vous n'avez pas besoin d'un wrapper autour de vos éléments (comme avec les flottants) et vous pouvez centrer votre élément si vous en avez besoin.

http://jsfiddle.net/8md3jy4r/3/


4
2018-05-20 17:57



Ensemble display:inline-block puis ajustez vos marges.

violons ici: http://jsfiddle.net/Q2MrC/


3
2017-12-04 19:08



attribut set width en tant que: width: fit-content

demo:  http://jsfiddle.net/rvrjp7/pyq3C/114


3
2017-08-23 11:37



Vous pouvez utiliser l'un des deux ci-dessous: -

1) affichage: bloc en ligne:

http://jsbin.com/feneni/edit?html,css,js,output

Décommenter la ligne

 float:left;
 clear:both 

et vous constaterez que le conteneur parent a été réduit.

2) Utilisation de l'affichage: table

http://jsbin.com/dujowep/edit?html,css,js,output


2
2018-06-30 17:22



Essayez d'utiliser un <span> élément à la place. Ou si vous préférez, essayez display:inline


1
2017-12-04 19:06