es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • ¿Cómo puedo solucionar que los enlaces tengan demasiada altura y alinear los elementos enumerados horizontalmente para que coincidan al mismo nivel?

¿Cómo puedo solucionar que los enlaces tengan demasiada altura y alinear los elementos enumerados horizontalmente para que coincidan al mismo nivel?

25 Jul, 2023 Programación

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?

Heres the picture

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>

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que el problema está con la propiedad margin-top: 60%; en el selector a 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:

    a li{
  text-align:center;
  color:#54041c;
  font-size:3.5vh;
  font-family:Verdana;
  height: 5vh;
  margin-top: 2vh;
  display: flex;
  align-items: center;
}

    Esto establece una altura fija y un margen vertical para los elementos a li y los alinea verticalmente utilizando align-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 elemento li, no al revés. Entonces, el HTML debería verse así:

    <ul>
  <li><a href="index.html">Inicio</a></li>
  <li><a href="">Clubes</a></li>
  <li><a href="">Acerca de</a></li>
  <li><a href="">Contacto</a></li>
</ul>

    ¡Espero que esto te ayude!

Comments are closed.