0
207
Vistas¿Cómo alinear algunos elementos de una barra de navegación en CSS?
Estoy haciendo una barra de navegación usando HTML y CSS. Tengo 3 elementos: 2 a-href y 1 botón
HTML:
<nav> <ul> <li> <a href="/signin">Home</a> </li> <li> <a href="/games">Games</a> </li> <button class="btn-item btn-ghost red secundary round"> Sign Out </button> </ul> <div class="hide"><i class="fa fa-bars" aria-hidden="true"></i> Menu</div> </nav>y tengo estos estilos:
CSS:
* { margin: 0; padding: 0; box-sizing: border-box; font-family: monospace; font-size: 20px; } nav ul { list-style: none; background: black; text-align: left; } nav ul li { display: inline-block; padding: 20px; transition: all ease-in-out 250ms; } ul li a { color: white; text-decoration: none; } nav ul li:hover { background: red; }específicamente este bloque:
nav ul { list-style: none; background: black; text-align: left; }en la propiedad text-align:left, se encarga de alinear todos los elementos de la barra de navegación, el problema es que quiero que el a href quede alineado al centro y el botón a la derecha. ¿Cómo puedo conseguir esto?
3 Respuestas
Responde la pregunta0
Perdón por la respuesta tardía, solo agrega
button{ float: right; margin-top:15px; }Estoy usando un lápiz de código, por lo que es posible que deba ajustar la parte superior del margen para que se ajuste a cualquier vista que tenga. Avíseme si tiene alguna otra pregunta.
0
Probar esto. Hizo que la etiqueta de navegación fuera el contenedor principal en lugar de la ul e hizo algunas otras cosas.
* { margin: 0; padding: 0; box-sizing: border-box; font-family: monospace; font-size: 20px; } nav { background: black; width: 100vw; height: 100px; display: flex; justify-content: center; align-items: center; } nav ul { list-style: none; display: flex; justify-content: center; align-items: center; width: 90%; } nav ul li { display: inline-block; padding: 20px; transition: all ease-in-out 250ms; } ul li a { color: white; text-decoration: none; } nav ul li:hover { background: red; } <nav> <ul> <li> <a href="/signin">Home</a> </li> <li> <a href="/games">Games</a> </li> </ul> <button id="myButton" class="btn-item btn-ghost red secundary round"> Sign Out </button> <!-- <div class="hide"><i class="fa fa-bars" aria-hidden="true"></i> Menu</div> --> </nav>0
Try this: `nav ul { list-style: none; background: black; text-align: center; }`Prácticamente simplemente cambiando la alineación del texto al centro en lugar de a la izquierda, estos son los resultados.
