1

Tengo el siguiente menú:

<ul class="topMenu">
    <li>
        <img src="img/logo.png" alt="">
        <p>Winset</p>
        <a class="fa fa-twitter" href="https://www.google.es"></a>
        <a class="fa fa-instagram" href="https://www.google.es"></a>
    </li>
</ul>

Con el siguiente CSS:

/* TOP MENU OF THE PAGE */
.topMenu {
    background-color: black;
    font-size: 30px;
    list-style-type: none;
    color: white;
    text-align: right;
}
.topMenu a {
    color: white;
    text-decoration: none;
    padding-right: 10px;
}
.topMenu a:hover {
    color: yellow;
}
.topMenu img {
    width: 50px;
    float: left;
}
.topMenu p {
    float: left;
}

Tengo un problema a la hora de ajustar todos los elementos al mismo nivel en le menu, ya que se ven de la siguiente forma:

introducir la descripción de la imagen aquí

Me gustaría alinear todos los elementos dentro del topMenu, pero no se como hacer que estén a la misma altura, ¿alguna sugerencia?

Si alguien tiene también alguna sugerencia para mejorar el HTML que he añadido se lo agradecería, ya que estoy empezando y cualquier consejo es bienvenido.

¡Gracias de antemano!

1 respuesta 1

2

Yo usaría Flexbox para poder hacerlo mas rápido te muestro el código que implemente y te explico adentro de el para que sirven, por otro lado si te interesa aprender mas sobre Flexbox te dejo este Link

/* TOP MENU OF THE PAGE */
.topMenu {
    display: flex; /*Convertimos al menú en flexbox*/
    justify-content: space-between; /*Con esto le indicamos que margine todos los items que se encuentra adentro hacia la derecha e izquierda*/
    align-items: center; /*con esto alineamos de manera vertical*/
    background: #000;
    padding: 30px 0px;
    color: #fff;
}
.topMenu ul {
    list-style: none;
}
.topMenu ul li {
  display: inline-block;
  margin-right: 10px;
}
.logo {
  display: flex;
  align-items: center;
}
.logo span {
  margin-left: 10px;
}
<div class="topMenu">
    <div class="logo">
      <img src="img/logo.png" alt="">
      <span>Winset</span>
    </div>
    <ul>
      <li>F</li>
      <li>T</li>
    </ul>
  </div>

Por cierto estas cometiendo un error en utilizar una lista e insertar todo ahí adentro como logo o texto, te recomiendo que la etiqueta ul solo lo utilices si se trata de una lista ejemplo los ítems del menú.

Espero ayudarte con esto, cualquier cosa me comentas, Suerte!

5
  • Gracias por tu respuesta. El logo esta a una altura diferente de la resta de elementos en mi prueba...
    – winset
    Commented el 4 jun. 2021 a las 14:39
  • 1
    Cambia <p>Winset</p> por <span>Winset</span>
    – Roy
    Commented el 4 jun. 2021 a las 14:51
  • Ha funcionado, gracias. Que diferencia supone el elemento p del span?
    – winset
    Commented el 4 jun. 2021 a las 14:57
  • ahí edite y lo puse para que se centre el span acorde a la altura de la img
    – Roy
    Commented el 4 jun. 2021 a las 14:58
  • 1
    span - Es un contenedor en línea. Sirve para aplicar estilo al texto o agrupar elementos en línea. p - Es el apropiado para distribuir el texto en párrafos.
    – Roy
    Commented el 4 jun. 2021 a las 14:59

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.