5
respuestas

¿Cómo podemos hacer para que el menú se ponga al lado derecho y el logo al lado izquierdo?

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="pruebas.css">
</head>

<body>
    <header class="encabezado">
        <a class="logo" href="#">
            <img src="img/logo.png">
        </a>

        <ul class="menu">
            <li class="menu-item">Item 1 del menu</li>
            <li class="menu-item">Item 2 del menu</li>
            <li class="menu-item">Item 3 del menu</li>
            <li class="menu-item">Item 4 del menu</li>
        </ul>
    </header>
</body>

</html>

CSS

.encabezado{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.encabezado .menu{
    display: flex;
    gap: 40px;
}

.encabezado .menu-item {
    margin-right: 10px;
}

![](Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad )

5 respuestas

¡Hola Guidopastorescobaribañez!

Para que el menú se ponga al lado derecho y el logo al lado izquierdo, debes hacer lo siguiente:

  1. En el CSS, elimina la propiedad "justify-content: space-between;" de la clase ".encabezado".
  2. Agrega la propiedad "margin-right: auto;" a la clase ".menu".
  3. Agrega la propiedad "margin-left: auto;" a la clase ".logo".

El código CSS quedaría de la siguiente manera:

.encabezado{
    display: flex;
    align-items: center;
}

.encabezado .menu{
    display: flex;
    gap: 40px;
    margin-right: auto;
}

.encabezado .logo{
    margin-left: auto;
}

.encabezado .menu-item {
    margin-right: 10px;
}

Con estos cambios, el menú se ubicará en el lado derecho y el logo en el lado izquierdo.

¡Espero haber ayudado y buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)

Hola Rafaela Rocha.

En realidad estoy revisando el código que nos compartes y contradice un poco lo que enseñan en el curso, aparte al momento de hacer lo que tú indicas, el menú y el logo quedan centrados, si bien queda uno a la izquierda y uno a la derecha, en realidad queda como un encabezado central, por el contrario, con el código que comparte el compañero si se logra hacer que cada elemento se ubique justamente a cada lado de la pantalla. !!saludos!!

Muchas gracias compañero, me sirvio de mucho lo que pusiste , me equivoque en algo tan basico , solo una duda por que agregaste un lang-en en html

Hola Jorge Alberto Guzmán Santiago, el compañero que puso lang en la etiqueta de HTML es para que se detecte el idioma, en ese caso él puso lang="en" detecta inglés, también se puede poner lang="es" para español, Saludos

Muchas gracias compañero