web-dev-qa-db-fra.com

UL a-t-il une marge ou un rembourrage par défaut

Cela peut sembler une question stupide, mais j'ai ajouté un UL à une page de base et la liste semble décentrée. La liste n'a rien de spécial. Aucun CSS spécifique ajouté: juste une liste. Quand je charge en direct, c'est légèrement décentré.
Y a-t-il une marge par défaut ou un rembourrage sur le côté gauche?

<h3>Title Heading</h3>
   <ul id="listItems">
       <li>itemOne</li>
       <li>itemTwo</li>
       <li>itemThree</li>
   </ul>

Le corps principal a tout le code CSS pour le centrage, l'alignement, le flottement, etc. Le "titre en-tête" s'aligne parfaitement. La liste est un peu décalée.

Je vous remercie.

Oh, je ne sais pas si c'est important, mais j'ai ajouté la cause 'id' ... je voulais utiliser 'first-of-type' pour donner le 1er élément em (en gras).

htmlcssalignmenthtml-lists
13
JZeig1

Le problème est que par défaut, les navigateurs ont un css personnalisé dans chrome par exemple:

ul, menu, dir {
   display: block;
   list-style-type: disc;
   -webkit-margin-before: 1em;
   -webkit-margin-after: 1em;
   -webkit-margin-start: 0px;
   -webkit-margin-end: 0px;
   -webkit-padding-start: 40px;
}

Vous devrez utiliser une règle personnalisée pour votre ul:

element.style {
    margin-left: 0px;
    /* set to 0 if your not using a list-style-type */
    padding-left: 20px;
}
14
Michael Wilson

Les listes seront toujours alignées afin que le texte reste en ligne avec le bord de l'élément parent. Cela signifie que les puces seront par défaut situées à l'extérieur (à gauche) de l'élément. Vous pouvez forcer l'alignement à arriver au point de puce, pas au texte comme ceci:

ul {
  list-style-position: inside; }

Alternativement, vous pouvez simplement ajouter votre propre marge pour pousser l'élément de liste entier comme ceci:

ul {
  margin-left: 20px; }
4
Coop