2
respuestas

[Bug] No se alinean los elementos

Referente al curso HTML5 y CSS3 parte 2: Posicionamiento, listas y navegación, en el capítulo Lista con Productos y actividad Ajustando el tamaño de los elementos

por Misael Bahena Vargas
| 32.4k xp | 1 posts

Estoy teniendo problemas al intentar alinear los elementos de la pagina, estoy haciendo exactamente lo que dice en el video, sin embargo no funciona alisto el código y la captura de la página:

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad 

/* Contenido de la página */

.productos{
    width:940px;
    margin: 0 auto;
    padding: 50px;
}

.cortes{
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    background-color: #CCCCCC; 
    margin: 0 1.5%;
    padding: 30px 20px;
    box-sizing: border-box;
}

.productos h2{
    font-size: 30px;
    font-weight: bold;
}

.descripcion{
    font-size: 18px;
}

.precio{
    font-size: 20px;
    font-weight: bold;
    margin-top: 15px;
}
2 respuestas
por Hector Gerardo Velez Almaraz
| 28.7k xp | 1 posts
Repartidor

Por lo que veo te falto referenciar la lista

.productos li{
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    margin: 0 1.5%;
    padding: 30px 20px;
    box-sizing: border-box;
   border: 2px solid #000000;
   border-radius: 10px
por Jose Alonso Adaray Gomez Rivera
| 48.8k xp | 5 posts

Me pasó lo mismo, por lo que al investigar me di cuenta que lo que me generaba ese desfase entre la alineación de los bloques, era la separación lateral, así que opté por modificar el "padding: 30px 20px" por un "padding-block: 30px", que solo modifica la separación superior e inferior. A continuación te dejo una liga en donde lo consulté. https://www.w3schools.com/cssref/playdemo.php?filename=playcss_padding-block

Espero que este cambio no afecte mi código a futuro, jeje.

la redacción quedó así:

.productos li{
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    background: #CCCCCC;
    margin: 0 1.5%;
    padding-block: 30px;
    box-sizing: border-box;
    border: 2px solid #000000;
    border-radius: 25px;
}

Así se ve: