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

[Duda] No se aplica display: inline-block

Mi lista queda arriba de la imagen como si la propiedad inline-block no funcionara :c

El css

.contenido-diferenciales{
    width: 640px;
    margin: 0 auto;
}

.listalista-diferenciales{
    width: 40%;
    display: inline-block;
    vertical-align: top;
}

.imagen-diferenciales{
    width: 60%;
}

Aqui el html

        <section class="diferenciales">

            <h3 class="titulo-principal">Diferenciales</h3>

            <div class="contenido-diferenciales">
                <ul class="lista-diferenciales">
                    <li class="items">Atención personalizada a los clientes</li>
                    <li class="items">Espacio diferenciado</li>
                    <li class="items">Localización</li>
                    <li class="items">Profesesionales calificados</li>
                    <li class="items">Puntualidad</li>
                    <li class="items">Limpieza</li>
                </ul>
                <img src="diferenciales/diferenciales.jpg" class="imagen-diferenciales">
            </div>

        </section>
4 respuestas

¡Hola Daniel! Vi en tu código que tienes una etiqueta mal nombrada.

.listalista-diferenciales{
    width: 40%;
    display: inline-block;
    vertical-align: top;
}

Prueba quitando una de la palabra "lista" dentro de tu código, espero sirva.

ya correji pero igual sigue sin poder alinearme el texto y la imagen :c

¡Ya di con la respuesta! Lo que falta hacer en ese código es poner la etiqueta de img sobre la misma línea de la ul. Así:

        <section class="diferenciales">

            <h3 class="titulo-principal">Diferenciales</h3>

            <div class="contenido-diferenciales">
                <ul class="lista-diferenciales">
                    <li class="items">Atención personalizada a los clientes</li>
                    <li class="items">Espacio diferenciado</li>
                    <li class="items">Localización</li>
                    <li class="items">Profesesionales calificados</li>
                    <li class="items">Puntualidad</li>
                    <li class="items">Limpieza</li>
                </ul><img src="diferenciales/diferenciales.jpg" class="imagen-diferenciales">
            </div>

        </section>

Mucho cuidado, que no quede ni un espacio entre ambas etiquetas.

Espero te sirva, a mí si me sirvió hacer eso.

¡Saludos!

También revisa en tu CSS que hayas eliminado un código que es el

.ul li{
    height: 400px;
}

Yo lo tenía de más y me separaba los elementos de la lista.