Hola, en mi footer los elementos de “footer-right” se quedan cargados hacia la izquierda. Alguien podría ayudarme, por favor? css <code...

Diana Gonzalez Yescas

Pregunta

student•hace 4 años

Hola, en mi footer los elementos de “footer-right” se quedan cargados hacia la izquierda. Alguien podría ayudarme, por favor?

css

footer{
     width: 100%;
     height: 50px;
     position: absolute;
     bottom: 0;
     display: grid;
     grid-template-columns: 1fr 1fr;
     align-items: center;
     font-size: 13px;
     background-color: #f2f2f2;
     border-top: 1px solid #e4e4e4;
 }
 footer ul{
     margin: 15px;
     list-style: none;
     display: flex;
     padding-left: 0;
 }
 footer .footer-left{
     justify-content: left;
 }
 footer .footer-right{
     justify-content: right;
     
}
 footer ul li a{
     margin: 10px;
     color: #5f6368;
 }```

html

<li>

<a href="">Publicidad</a>

</li>

<li>

<a href="">Negocion</a>

</li>

<li>

<a href="">Acerca de </a>

</li>

<li>

<a href="">Como funciona la busqueda</a>

</li>

</ul>

<li>

<a href="">Privacidad</a>

</li>

<li>

<a href="">Condiciones</a>

</li>

<li>

<a href="">Preferencias</a>

</li>

</ul>

</footer>```

JOSE PINTO VEGA

student•hace 4 años

yo creo que el error viene de html puede que hayas dejado la clase con un nombre diferente y cuando la llames no apique los cambios.

Diana Gonzalez Yescas

student•hace 4 años

Gracias chicos

Carlos Eduardo Gomez García

teacher•hace 4 años

¡Hola!, la solución que te dice ceporro es correcta, la explicación es que estás usando flexbox, con flexbox únicamente existe la propiedad

flex-end

(right) y

flex-start

(left) que también pueden significar bottom o top respectivamente si cambias el

flex-direction

No puedes usar las propiedades

end

start

right

left

ya que estas son propiedades que se usan con CSS Grid, no con Flexbox... sí, CSS Grid también hace uso de estas mismas propiedades de Flexbox.

Pero para tu problema es más sencillo usar

space-between

CRISTIAN BARBERO PÉREZ

student•hace 4 años

Hola, no se muy bien porqué, pero si le pones flex-end si que se van a la derecha, pero si le pones right o end solamente no.

justify-content: flex-end; //funciona
justify-content: end; //no funciona
justify-content: right; // no funciona

Otra opción, creo que más sencilla es:

footer{
    display: flex;
    justify-content: space-between;
}

.footer-left li, .footer-right li{
    display: inline-block;
    padding-left: 10px;
    padding-right: 10px;
}

Hola, en mi footer los elementos de “footer-right” se quedan cargados hacia la izquierda. Alguien podría ayudarme, por favor? css <code...

Curso Práctico de HTML y CSS

Curso Práctico de HTML y CSS