Estoy tratando de hacer un encabezado. Tengo cuatro elementos de menú y necesito que estén alineados en el menú con intervalos iguales.
JSFiddlelink <script async src="//jsfiddle.net/SM079/xdhu0kr2/1/embed/"></script>
Por favor ayuda
puedes agregar esto a la clase .topnav
display: flex; align-items: center; justify-content: center;Use puede usar la propiedad flexbox para alinear los elementos del menú en el menú con intervalos iguales. Solo necesita cambiar el css en la clase .topnav . Como esto:
.topnav { overflow: hidden; background-color: black; display:flex; justify-content : space-between; }Código de trabajo:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0; font-family: Arial, Helvetica, sans-serif; } .topnav { overflow: hidden; background-color: black; display: flex; justify-content: space-between; } .topnav a { float: left; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .topnav a.active { background-color: #04AA6D; color: white; } </style> </head> <body> <div class="topnav"> <a class="active" href="#home">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> <a href="#about">About</a> </div> </body> </html>Para centrar el texto en la pantalla use este
.topnav { overflow: hidden; background-color: black; justify-content: center; align-items: center; display: flex; }Luego, para configurar el espacio entre los enlaces del encabezado, puede usar esto
a{ margin-left: 2rem; }