Comment puis-je séparer efficacement les éléments de navigation en utilisant uniquement CSS ?

Maintenir la séparation de la navigation avec CSS

Lors de l'ajout de séparateurs entre les éléments de navigation, CSS peut fournir une solution plus efficace et visuellement attrayante que l'ajout d'une liste supplémentaire éléments ou incorporer des séparateurs dans les images d'éléments.

Les deux solutions proposées dans la question présentent des inconvénients potentiels. L'ajout d'éléments de liste supplémentaires à des fins de séparation peut encombrer la structure HTML, tandis que l'inclusion de séparateurs dans les images peut créer des problèmes de clics accidentels.

Une solution élégante consiste à utiliser du CSS pur pour créer les séparateurs. Cette approche permet de conserver la séparation visuelle souhaitée sans modifier la structure HTML ni altérer les images des éléments.

Voici comment cela fonctionne :

nav li + li:before{
    content: "|";
    padding: 0 10px;
}

Ce code ajoute une barre verticale entre chaque liste article. L'utilisation du sélecteur adjacent garantit que la barre est ajoutée uniquement entre les éléments de la liste, pas avant le premier ni après le dernier. Le pseudo-sélecteur :before insère la barre avant chaque élément sans affecter le contenu existant.

En utilisant cette technique CSS, vous pouvez obtenir la séparation souhaitée sans sacrifier la propreté de votre structure HTML ni compromettre l'expérience utilisateur avec des erreurs accidentelles. clics.

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!