La plupart des barres de navigation sont organisées horizontalement comme indiqué dans la figure ci-dessous, alors comment cela est-il réalisé? En fait, il utilise principalement la disposition horizontale de Li dans la balise <ul>. Voici un exemple pour expliquer en détail comment il est implémenté.
1. Écrivez un schéma de code html menu horizontal<ul id = menu> <li> <a href = http: //www.baidu.com> baidu.com </a> </li> <li> <a href = // www.vevb.com> jb51.net </a> </li> <li> <a href = http: //www.yahoo.com> yahoo.com <li> <a href = http: //www.google.com class = Last> Google.com </a> </li> </ul>CODE CSS INSÉRIEUR 2
<1> Définissez le style commun
<style type = text / css> #meu {font: 12px verdana, arial, sans-serif; / * Définir la taille du texte et le style de police * / largeur: 100%; } #Menu, #Menu li {list-style: Aucun; / * Supprimez le symbole de liste par défaut * / rembourrage: 0; / * Supprimez la marge intérieure par défaut * / marge: 0; / * Retirez la marge extérieure par défaut * / float: gauche; / * Flotter à gauche * / affichage: bloc;}<2> définir le style de lien
<style type = text / css> #menu li a {affichage: block; / * Définissez le lien sur un élément de niveau bloc * / largeur: 150px; / * Définir la largeur * / hauteur: 30px; / * Définissez la hauteur * / line-height: 30px; / * Réglez la hauteur de la ligne, définissez la même valeur pour la hauteur et la hauteur de la ligne, de sorte qu'une seule ligne de texte peut être centrée verticalement * / Text-Align: Centre; / * Texte aligné du centre * / arrière-plan: # 3A4953; / * Définissez la couleur d'arrière-plan * / couleur: #fff; / * Définir la couleur du texte * / text-décoration: aucun; / * Retirez le soulignement * / Border-droite: 1px solide # 000; / * Ajouter un diviseur à gauche * /} </ style><3> Lien Effet de survol
<style type = text / css> #menu li a: hover {background: # 146c9c; / * Changer la couleur d'arrière-plan * / couleur: #ffff; / * Modifier la couleur du texte * /} </ style><4> Retirez la boîte droite de la barre de navigation la plus à gauche
<style type = text / css> #meu li a.last {border-right: 0; / * Supprimer la bordure gauche * /} </ style>3 Code complet
<! Doctype html> <html> <éadf> <meta charset = utf-8> <tight> effet de l'invite d'image </title> <script src = .. / jQuery-3.3.1.min.js> </ script> <style type = text / css> #menu {font: 12px verdana, arrial, Sans-Serif; / * Définir la taille du texte et le style de police * / largeur: 100%; } #Menu, #Menu li {list-style: Aucun; / * Supprimez le symbole de liste par défaut * / rembourrage: 0; / * Supprimez la marge intérieure par défaut * / marge: 0; / * Retirez la marge extérieure par défaut * / float: gauche; / * Float à gauche * / affichage: bloc; } #menu li a {affichage: bloc en ligne; / * Définissez le lien sur un élément de niveau bloc * / largeur: 150px; / * Définir la largeur * / hauteur: 30px; / * Définissez la hauteur * / line-height: 30px; / * Réglez la hauteur de la ligne, définissez la même valeur sur la hauteur et la hauteur de la ligne, de sorte qu'une seule ligne de texte peut être centrée verticalement * / Text-Align: Centre; / * Texte aligné du centre * / arrière-plan: # 3A4953; / * Définissez la couleur d'arrière-plan * / couleur: #fff; / * Définir la couleur du texte * / text-décoration: aucun; / * Retirez le soulignement * / Border-droite: 1px solide # 000; / * Ajouter un diviseur à gauche * /} #Menu Li A: Hover {Background: # 146C9c; / * Changer la couleur d'arrière-plan * / couleur: #fff; / * Modifier la couleur du texte * /} #Menu li a.last {border-right: 0; / * Supprimer la bordure gauche * /} </ style> </ head> <body> <ul id = menu> <li> <a href = http: //www.baidu.com> baidu.com </a> </li> <li> <a href = // www.vevb.com> jb51.net </a> </li> <li> <A href = http: //www.yahoo.com> yahoo.com </a> </li> <li> <a href = http: //www.google.com class = last> google.com </a> </li> </ul> </ body> </html>Exécuter en ligne
Conseil: vous pouvez d'abord modifier du code, puis l'exécuter
En bref, la chose la plus nécessaire pour le faire organiser horizontalement est: le style principal de la balise <UI> est l'affichage: Balock;
Le style principal de <li> est l'affichage: en ligne-balock, float: gauche, style liste: aucun;
Ceci est l'article sur l'exemple d'implémentation de l'arrangement horizontal Li dans les balises en HTML. Pour un contenu HTML HORIZONTAL HORIZONTAL plus lié, veuillez rechercher les articles précédents de Wulin.com ou les articles connexes suivants. J'espère que tout le monde soutiendra Wulin.com à l'avenir!