Comment un article UL peut-il rester dans son DIV contenant ?

Question

J'ai une configuration très simple :

<div class="container">
  <ul>
    <li>Projet 1</li>
    <li>Projet 2</li>
  </ul>
</div>

J'aurais pensé que tout le contenu et les puces de l'UL seraient à l'intérieur du div, mais ce n'est pas le cas actuellement.

Les puces d'UL apparaissent à l'extérieur du div et lorsque le débordement est masqué, elles disparaissent.

Pour moi, cela pose problème d'une certaine manière, et ce problème existe dans divers navigateurs. J'ai consulté la spécification HTML mais je n'ai rien trouvé sur la façon dont cela devrait se produire.

Existe-t-il un correctif CSS ou un autre correctif de mise en page ?

Answer 1

list-style-position: inside Fonctionne très bien dans la plupart des cas, sauf si vous avez besoin de puces multilignes sur de petits écrans, car cela entraînerait l'alignement du texte avec la puce au lieu du début du texte.

Conserver la valeur par défaut text-align: outside, qui autorise une petite marge et justifie le texte à gauche pour couvrir tous les conteneurs centrés, peut résoudre le problème de l'alignement des puces.

ul, ol {
  margin-left: 0.75em;
  text-align: left;
}

Answer 2

Vous devrez utiliser list-style-position :

ul {
   list-style-position: inside;
}