La mayoría de las barras de navegación están dispuestas horizontalmente como se muestra en la figura a continuación, entonces, ¿cómo se logra esto? De hecho, utiliza principalmente la disposición horizontal de Li en la etiqueta <ul>. Aquí hay un ejemplo para explicar en detalle cómo se implementa.
1. Escribe un esquema de código HTML de menú 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</a></li> <li> <a href = http: //www.google.com class = Last> Google.com </a> </li> </ul>2 escribiendo código CSS
<1> Establezca el estilo común
<style type = text/css> #menu {font: 12px verdana, arial, sans-serif; /* Establecer tamaño de texto y estilo de fuente*/ ancho: 100%; } #menu, #menu li {list-style: none; / * Eliminar el símbolo de lista predeterminado */ Padding: 0; / * Eliminar el margen interno predeterminado */ margen: 0; / * Eliminar el margen externo predeterminado */ float: izquierda; /* Flotar a la izquierda*/ Display: Block;}<2> Estilo de enlace establecido
<style type = text/css> #menu li a {display: block; /* Establezca el enlace en un elemento de nivel de bloque*/ ancho: 150px; /* Establecer el ancho*/ altura: 30px; /* Establecer la altura*/ LINE-HEight: 30px; /* Establezca la altura de la línea, establezca el mismo valor para la altura y la altura de la línea, de modo que una sola línea de texto pueda centrarse verticalmente*/ Text-Align: Center; /* Texto alineado en el centro*/ fondo:#3A4953; /* Establecer el color de fondo*/ color: #fff; /* Establecer el color de texto*/ Decoración del texto: Ninguno; /* Retire el subrayador*/ border-right: 1px Solid #000; / * Agregue un divisor a la izquierda */} </style><3> Efecto flotante de enlace
<style type = text/css> #menu li a: hover {fondo: #146c9c; /* Cambiar el color de fondo*/ color: #ffff; /* Cambiar el color de texto*/} </style><4> Retire la caja derecha de la barra de navegación más a la izquierda
<style type = text/css> #menu li a.last {border-right: 0; /* Retire el borde izquierdo*/} </style>3 Código completo
<! DOCTYPE HTML> <html> <fead> <meta charset = utf-8> <title> efecto de indicador de imagen </title> <script src = ../jquery-3.3.1.min.js> </script> <style type = text/css> #menu {Font: 12px verdana, arial, sans-serif; /* Establecer tamaño de texto y estilo de fuente*/ ancho: 100%; } #menu, #menu li {list-style: none; / * Eliminar el símbolo de lista predeterminado */ Padding: 0; / * Eliminar el margen interno predeterminado */ margen: 0; / * Eliminar el margen externo predeterminado */ float: izquierda; /* Flotar izquierda*/ Display: Block; } #menu li a {display: inline-block; /* Establezca el enlace en un elemento de nivel de bloque*/ ancho: 150px; /* Establecer el ancho*/ altura: 30px; /* Establecer la altura*/ LINE-HEight: 30px; /* Establezca la altura de la línea, establezca el mismo valor en la altura y la altura de la línea, de modo que una sola línea de texto pueda centrarse verticalmente*/ Text-Align: Center; /* Texto alineado en el centro*/ fondo:#3A4953; /* Establecer el color de fondo*/ color: #fff; /* Establecer el color de texto*/ Decoración del texto: Ninguno; /* Eliminar el subrayado*/ border-right: 1px Solid #000; / * Agregar un divisor a la izquierda */} #menu li a: hover {fondo: #146c9c; /* Cambiar el color de fondo*/ color: #fff; /* Cambiar el color de texto*/} #menu li a.last {border-right: 0; /* Retire el borde izquierdo*/} </syle> </head> <body> <ul id = menú> <li> <a href = http: //wwww.baidu.com> baidu.com </a> </li> <li> <a href = // www.vevb.com> jb51.net </a> </li> <a> <a 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>Ejecutar en línea
Consejo: puede modificar algún código primero y luego ejecutarlo
En resumen, lo más necesario para que se organice horizontalmente es: el estilo principal de la etiqueta <Si> es la pantalla: Balock;
El estilo principal de <li> es la pantalla: Balock en línea, flotante: izquierda, estilo list: ninguno;
Este es el artículo sobre el ejemplo de implementación de la disposición horizontal de Li en las etiquetas en HTML. Para obtener un contenido de disposición horizontal HTML Li más relacionado, busque los artículos anteriores de Wulin.com o los siguientes artículos relacionados. ¡Espero que todos apoyen a Wulin.com en el futuro!