Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
6
respuestas

No se alinean los cuadros

Buenas! no se me alinean los bloques de los productos, desde mi punto de vista tengo el código igual que el instructor pero no me funciona. Adjunto mi código:

header {
    background-color: #BBBBBB;
    padding: 20px;
}

.caja{
    width: 940px;
    position: relative;
    margin: 0 auto;

}

nav{
    position: absolute;
    top: 110px;
    right: 0;
}

nav li {
    display: inline;
    margin: 0 0 0 15px;
}

nav a{
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
}

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

.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-color:#000000;
    border-width: 2px;
    border-style: solid;
}

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

.producto-descripcion {
    font-size: 18px;
}

.producto-precio {
    font-size: 20px;
    font-weight: bold;
    margin-top: 10px;
}

Y adjunto mi página: Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

6 respuestas

Es curioso, a mi en uno de los navegadores que lo probé tampoco se me alineaban pero en los otros si. Si utilizaste el archivo reset.css?

+10

gracias por el codigo

Tal vez si reduces el padding puede ser que las imágenes estén de diferentes tamaños, intenta reduciendo el padding.

Crea un nuevo archivo en el directorio raiz de tu proyecto con el codigo del profesor, luego tu archivo comparalo con el de el. En vscode puedes darle click derecho al archivo y seleccionar para comparar, luego click derecho al archivo del profesor y dale a comparar con seleccionado.

Deberías inspeccionar el elemento en cuestión dando click derecho sobre el mismo para ver si tiene alguna propiedad diferente a los demás

Fijate queTe falta un 0 en el precio de barba. A mi tampoco me quedaba bien alineado, pero a diferencia del tuyo, el del medio(Barba). Fui a inspeccionar y si el rectangulo interno del elemento barba tenia a penas una diferencia con respectos a los otros que tenian el mismo tamaño, no supe como mejorarlo porque cambiando el padding me seguia quedando mal. Asi que fui al parrafo y agregué un break entre "corte y" diseño profesional, quedó perfecto el alineado.