La première propriété de liste mis en exergue est donc LIST-STYLE-POSITION.

Ces deux valeurs permettent de placer les puces à l'extérieur du contenu de la liste ou à l'intérieur afin de rendre la liste compact.

Encore une fois, cette propriété ne fonctionne pas sur l'ensemble des navigateurs.

Pour plus de renseignements veuillez consulter le W3C.

ul.exterieur {
  list-style-position: outside;
}
ul.interieur {
  list-style-position: inside;
}
  ...
<ul class="exterieur">
  <li> ... </li>
  ...
</ul>
  ...
<ul class="interieur">
  <li> ... </li>
  ...
</ul>
  ...
  • Premier item Premier item Premier item Premier item Premier item
  • Second item Second item Second item Second item Second item
  • Troisième item Troisième item Troisième item Troisième item Troisième item
  • Quatrième item Quatrième item Quatrième item Quatrième item Quatrième item
  • Cinquième item Cinquième item Cinquième item Cinquième item Cinquième item
  • Premier item Premier item Premier item Premier item Premier item
  • Second item Second item Second item Second item Second item
  • Troisième item Troisième item Troisième item Troisième item Troisième item
  • Quatrième item Quatrième item Quatrième item Quatrième item Quatrième item
  • Cinquième item Cinquième item Cinquième item Cinquième item Cinquième item