3
respuestas

[Duda] display: inline-block; no funciona como espero

en mi html tengo esta sección:

    <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">Profesionales calificados</li>
            </ul><img src="diferenciales/diferenciales.jpg" class="imagenDiferenciales">
        </div>
    </section>
    
    deberian verse la lista al lado de la imagen pero aparecen una abajo de otra, les paso mi CSS: 

.imagenDiferenciales { width: 60%;} .contenido-diferenciales{ width: 100%; margin: 0 auto; display:inline-block; } .lista-diferenciales{ width: 40%; }

Agradezco su respuesta. Saludos.

3 respuestas

¡Hola Guillermo!

Gracias por compartir tu duda con nosotros.

Una posible solución para esto es agregar la propiedad vertical-align: top; a la clase .lista-diferenciales en tu archivo CSS. Esto hará que la lista se alinee en la parte superior y se coloque al lado de la imagen. Aquí está el código actualizado:

.lista-diferenciales {
    width: 40%;
    vertical-align: top;
}

¡Saludos!

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

Saludos compañero, Entiendo que la intención es dejar el texto a la izquierda y la imagen a la derecha. Propongo la siguiente solución:

Darle formato a la imagen con margenes y tamaño deseado

.imagenDiferenciales{ width: 50%; margin: 0 0 20px 30px; }

Luego Ubicar el texto el texto al lado izquierdo

.diferenciales ul{ float: inline-start; margin-left: 20%;}

Luego darle los espacios necesarios para mejorar la visualización del texto

.diferenciales li{ margin: 0 0 1em; }

Espero haber ayudado en resolver la inquietud.

En caso no te funcione prueba con estas lineas de codigo Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad