Comment définir la largeur de paragraphe automatiquement en CSS?

Voici l'affaire. Au lieu de simplement en soulignant mon paragraphe et à l'aide de text-alignje veux ajouter une bordure en pointillé dessous et de le centrer à l'intérieur du paragraphe parent div. C'est mon code qui ne fonctionne pas. (Il ajoute la frontière de l'ensemble div au lieu de simplement le paragraphe)

p {
  border-bottom:1px dotted;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

Le paragraphe semble prendre de la largeur du parent div. Est-il un moyen de régler le point de la largeur du texte qu'il contient? (Il semble que margin:auto si possible.)

source d'informationauteur user2020058

29

Les paragraphes vont s'étendent sur la largeur de leurs conteneurs. Faire ne pas le faire, vous pourriez essayer:
```
p { display: inline-block; }
```
Tripoter exemple: http://jsfiddle.net/HuFZL/1/

Aussi, vous pouvez envelopper le p balises supplémentaires divsi vous en avez besoin pour effacer d'autres paragraphes/éléments.
4

si vous voulez paragraphe pour garder les empiler les uns sur les autres et de grandir à partir de leur contenu, ce que vous avez besoin est :
```
p { 
      display: table;
      margin:auto;
      border-bottom:1px dotted;
}
```
1

Essayez d'ajouter une valeur de largeur à votre paragraphe, sinon le paragraphe va remplir toute la largeur du conteneur parent et les valeurs de la marge à ne pas faire n'importe quoi:
```
p {
  border-bottom:1px dotted;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  width: 100px; /* whatever width you want */
}  
```

C'est ce que j'ai essayé ....

<html>

<style>
{
border-bottom:1px dotted;
margin-left:auto;
margin-right:auto;
text-align:center;
}

#custom
{
width : 10px;
}

</style>

<div id="custom"><p>dddd</p></div>

</html>

0

Non, la marge d'auto ne va pas changer la taille de l'élément paragraphe. Simplement, il tente automatiquement de déterminer la taille de la marge sur l'auto-taille côtés de l'élément. En gros, si vous voulez que le paragraphe soit plus petite que la div qui le contient vous pouvez définir une largeur statique du paragraphe(s) d'une largeur ou d'un pourcentage de l'élément parent de largeur intérieure. Une autre option si vous ne voulez pas faire de l'électricité statique dimensionnement du paragraphe(s) à régler le rembourrage sur l'élément parent ou un ensemble statique de la marge du paragraphe(s).
```
div.paragraph-container {
    padding: 20px; /* or padding: 20px 20px 20px 20px; sets all the padding individually (top, right, bottom, left) */
}
```
Ce que tous les paragraphes centre à l'intérieur de la div et être 40px plus petits en supposant que les paragraphes n'ont pas de marges.
```
div.paragraph-container p {
    margin: 10px 20px; /* sets the margin on the paragraph(s) to 10px on top and bottom and 20px on left and right which does the same as the first example assuming that the div does not have padding. */
}
```
Si vous voulez la frontière pour être exactement la largeur du texte:
```
div.paragraph-container p {
    border-bottom: 1px dotted black;
    padding: 0px 0px 5px 0px;
    margin: 10px 20px;
}

div.paragraph-container {
    padding: 0px;
}
```
En supposant que le texte remplit l'élément paragraphe puis ce sera le travail. Si vous avez 2 mots dans le paragraphe, il ne sera pas aussi large que le texte. La seule façon de l'enlever serait avec un élément inline comme un span ou un élément qui a été mis à display: inline;mais les éléments en ligne obtenez pêle-side-by-side, sauf si vous placez un élément de bloc entre eux.

De preuve de balle façon

HTML

<div class="container">
 <p><p>
</div>

CSS

.container { text-align:center; }
.container p { 
  display: table;
  margin:0 auto;
  display: inline-block; 
  zoom: 1; 
  *display: inline; 
}

Vous devez vous connecter pour publier un commentaire.