Comment puis-je créer des listes ordonnées en HTML/CSS sans points ?

Création de listes ordonnées en HTML/CSS sans points

Les listes ordonnées sont généralement affichées avec des points après les numéros de liste. Cependant, que se passe-t-il si vous devez personnaliser l’apparence en supprimant ces points ? Voici une exploration des solutions HTML et CSS disponibles.

Comme mentionné par l'utilisateur, CSS fournit un moyen d'y parvenir grâce à un style personnalisé. Les principales propriétés CSS à modifier sont :

• list-style-type : pour supprimer le point par défaut et appliquer un nouveau type.
• counter-increment et counter-reset : pour créer un compteur personnalisé qui générera les numéros de liste.
• contenu : Pour utiliser le compteur généré au sein de pseudo-éléments.

Le code CSS suivant démontre la fonctionnalité souhaitée :

<code class="css">ol.custom {
  list-style-type: none;
  margin-left: 0;
}

ol.custom > li {
  counter-increment: customlistcounter;
}

ol.custom > li:before {
  content: counter(customlistcounter) " ";
  font-weight: bold;
  float: left;
  width: 3em;
}

ol.custom:first-child {
  counter-reset: customlistcounter;
}</code>

En combinant ces propriétés CSS, vous pouvez créer une liste ordonnée qui affiche les nombres sans points. De plus, le contre-incrément : customlistcounter; La propriété vous permet de spécifier un autre caractère séparateur si vous le souhaitez.

Cependant, il convient de noter que certains navigateurs plus anciens, tels que IE6 et IE7, ne prennent pas en charge le pseudo-sélecteur :before. Pour garantir la compatibilité, pensez à ajouter une règle CSS supplémentaire pour cibler ces navigateurs et à utiliser l'apparence native de style liste :

<code class="css">ol.custom {
  *list-style-type: decimal; /* targets IE6 and IE7 only */
}</code>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!