¿Cómo puedo solucionar que los enlaces tengan demasiada altura y alinear los elementos enumerados horizontalmente para que coincidan al mismo nivel?
Llevo horas intentando arreglar esto pero no sé qué está causando el problema porque no le di altura a los enlaces o a los elementos de la lista, pero cuando elimino la etiqueta “img” están bien, pero cuando la vuelvo a agregar todo se desordena. ¿Alguien puede ayudarme a arreglar esto?
donde los elementos de la lista no están alineados y los enlaces/elementos de la lista tienen demasiada altura, lo cual no tiene sentido para mí. Esta es la primera vez que publico esto.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
```css
*{
padding:0;
margin:0;
text-decoration:none;
list-style:none;
outline:none;
}
body{
background-image:linear-gradient(147deg,#000428,#004e92);
height:100vh;
}
header{
min-height:5vh;
}
nav{
display:flex;
align-content:center;
justify-content:space-between;
}
#Logo{
width:22vh;
height:22vh;
}
ul{
margin-right:23vh;
width:70%;
justify-content:space-between;
align-content:center;
display:flex;
}
a li{
text-align:center;
margin-top:60%;
color:#54041c;
font-size:3.5vh;
font-family:Verdana;
}
<!-- language: lang-html -->
<strong>Parte del HTML</strong>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Home</title>
</head>
<body>
<!-- header-->
<header>
<nav>
<img id="Logo" src="Logo.png">
<ul>
<a href="index.html"><li>Home</li></a>
<a href=""><li>Clubs</li></a>
<a href=""><li>About</li></a>
<a href=""><li>Contact</li></a>
</ul>
</nav>
</header>
<!-- -->
<main>
</main>
</body>
</html>
davy.ai
Parece que el problema está con la propiedad
margin-top: 60%;
en el selectora li
. Esto hace que los elementos tengan demasiada altura y se desalineen con el logotipo.Para solucionar esto, intenta establecer una altura fija para los elementos
a li
y ajusta el margen en consecuencia. Por ejemplo:Esto establece una altura fija y un margen vertical para los elementos
a li
y los alinea verticalmente utilizandoalign-items: center;
. Es posible que debas ajustar los valores según tu diseño y disposición específicos.Además, ten en cuenta que el elemento
a
debe envolver al elementoli
, no al revés. Entonces, el HTML debería verse así:¡Espero que esto te ayude!