Die meisten Navigationsstangen sind horizontal angeordnet, wie in der folgenden Abbildung gezeigt. Wie wird dies also erreicht? Tatsächlich verwendet es hauptsächlich die horizontale Anordnung von Li im <ul> -Tag. Hier ist ein Beispiel, um ausführlich zu erklären, wie es implementiert wird.
1. Schreiben Sie ein horizontales Menü HTML -Codeschema<ul id = mseu> <li> <a href = http: //www.baidu.com> baidu.com </a> </li> <li> <a href = // www.vevb.com> jb51.net </a> </li> <a href = http: //wwwwwww.yahoo.com> yahoo.com> yahoo.com> yahoo.com> y //www.yaho..com> yahoo.com> yaho.-. <li> <a href = http: //www.google.com class = last> google.com </a> </li> </ul>2Writing CSS -Code
<1> Setzen Sie den gemeinsamen Stil
<style type = text/css> #menu {font: 12px Verdana, Arial, sans-serif; /* Textgröße und Schriftstil setzen*/ Breite: 100%; } #Menu, #Menu li {Listenstil: Keine; / * Entfernen Sie das Standardlistensymbol */ padding: 0; / * Entfernen Sie den Standard -Innenrand */ Margin: 0; / * Entfernen Sie den Standard -äußeren Rand */ float: links; /* Links schweben*/ Anzeige: Block;}<2> Linkstil festlegen
<style type = text/css> #Menu li a {display: block; /* Setzen Sie den Link zu einem Element auf Blockebene*/ width: 150px; /* Setzen Sie die Breite*/ Höhe: 30px; /* Setzen Sie die Höhe*/ Zeilenhöhe: 30px; /* Stellen Sie die Zeilenhöhe ein und legen Sie den gleichen Wert für die Höhe und Höhe der Linien, so dass eine einzelne Textlinie vertikal zentriert werden kann*/ text-align: center; /* Zentrum ausgerichtete Text*/ Hintergrund:#3A4953; /* Setzen Sie die Hintergrundfarbe*/ Farbe: #fff; /* Legen Sie die Textfarbe ein*/ Textdekoration: Keine; /* Entfernen Sie den Unterstrich*/ Grenzrecht: 1px fest #000; / * Fügen Sie links einen Teiler hinzu */} </style><3> Link -Hover -Effekt
<style type = text/CSS> #Menu li a: hover {Hintergrund: #146c9c; /* Hintergrundfarbe ändern*/ Farbe: #ffff; /* Textfarbe ändern*/} </style><4> Entfernen Sie die rechte Schachtel der Navigationsleiste in der linken Navigation
<style type = text/CSS> #Menu li A.last {Border-Light: 0; /* Entfernen Sie den linken Rand*/} </style>3 CODE CODE
<!DOCTYPE html><html><head><meta charset=utf-8><title>Image prompt effect</title><script src=../jquery-3.3.1.min.js></script> <style type=text/css> #menu { font:12px verdana, arial, sans-serif; /* Textgröße und Schriftstil setzen*/ Breite: 100%; } #Menu, #Menu li {Listenstil: Keine; / * Entfernen Sie das Standardlistensymbol */ padding: 0; / * Entfernen Sie den Standard -Innenrand */ Margin: 0; / * Entfernen Sie den Standard -äußeren Rand */ float: links; /* Links float*/ display: block; } #Menu li a {display: Inline-Block; /* Setzen Sie den Link zu einem Element auf Blockebene*/ width: 150px; /* Setzen Sie die Breite*/ Höhe: 30px; /* Setzen Sie die Höhe*/ Zeilenhöhe: 30px; /* Setzen Sie die Zeilenhöhe und setzen Sie den gleichen Wert auf die Höhe und Höhe der Linien, so dass eine einzelne Textlinie vertikal zentriert werden kann*/ text-align: center; /* Zentrum ausgerichtete Text*/ Hintergrund:#3A4953; /* Setzen Sie die Hintergrundfarbe*/ Farbe: #fff; /* Legen Sie die Textfarbe ein*/ Textdekoration: Keine; /* Entfernen Sie die Untersteuerung*/ Grenzrechte: 1px fest #000; / * Fügen Sie links einen Teiler hinzu */} #Menu li a: hover {Hintergrund: #146c9c; /* Hintergrundfarbe ändern*/ Farbe: #fff; /* Textfarbe ändern /* Entfernen Sie den linken Rand*/} </style> </head> <body> <ul id = mseu> <li> <a href = http: //www.baidu.com> baidu.com </a> </li> <li> <a href = // www.vevb.com> jb51.net </li> </li> </li> </li> </li> <ai> <a <a <ai> <a <ai> <a <ai> <ai> <ai> <ai> <a <ai> <ai> <a <ai> <ai> <a <ai> <ai> <ai> 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>Online laufen
Tipp: Sie können zuerst einen Code ändern und ihn dann ausführen
Kurz gesagt, das notwendigste, was es horizontal arrangiert, ist: Der Hauptstil des <Ui> -Tags ist Anzeige: Balock;
Der Hauptstil von <li> ist Anzeige: Inline-Balock, Float: Links, Listenstil: Keine;
Dies ist der Artikel über das Implementierungsbeispiel für die horizontale Anordnung von Li in Tags in HTML. Weitere verwandte HTML Li Horizontal -Anordnungsinhalte finden Sie in den vorherigen Artikeln von Wulin.com oder den folgenden verwandten Artikeln. Ich hoffe, jeder wird Wulin.com in Zukunft unterstützen!