1

Estoy creando una pagina web donde necesito mostrar texto al costado de una linea vertical, la linea vertical la hice con la etiqueta <br> y le di un alto de 40px, el texto esta dentro de la etiqueta <p>, he buscado en Internet y encontré que para alinear elementos utilice inline-block, lo he intentado pero me sigue poniendo el texto debajo de la linea

asi me queda la pagina

este es mi codigo html:

<div class="col col-12 col-sm-12 col-md-4 col-lg-4">
    <img src="src/images/descarga.jpg" alt="beneficio1" 
    class="beneficios-image">
    <div>
        <span style="display: inline-block;">
           <hr align="left" class="lineaVertical" width="2px" noshade="noshade">
         </span>
         <p class="texto-beneficio">
             <h5>Lorem ipsum dolor sit amet.</h5>
             <h6>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </h6>
         </p>
      </div>
 </div>

Este es mi codigo css:

.beneficios-image{
    width: 70% !important;
    height: 70% !important;
}

.lineaVertical{
    background-color: #00ffff;
    height: 40px;
}

.texto-beneficio{
    display: inline-block;
}
1
  • 1
    Creo que te refieres a la etiqueta <hr> en lugar de <br>. Puedes editar tu pregunta haciendo clic en editar Commented el 21 oct. 2019 a las 0:42

2 respuestas 2

1

para alinear elementos utilicé inline-block, lo he intentado pero me sigue poniendo el texto debajo de la linea

El motivo del porqué no te funcionó, es porque lo utilizaste en el <span>; para que los elementos se alineen correctamente deberías aplicar el inline-block en el contenedor de los elementos que quieras alinear, en este caso sería tu <div>.


Por otra parte, creo que podrías intentar aplicar un borde izquierdo a tu <div>, en vez de usar un <hr>, de esta manera, generas el mismo efecto con menos código.

Para esto, debes primero arreglar tu estructura HTML, eliminando el elemento <p>, y aplicando la clase al <div>:

<div class="col col-12 col-sm-12 col-md-4 col-lg-4">
    <img src="src/images/descarga.jpg" alt="beneficio1" class="beneficios-image">
    <div class="texto-beneficio">
        <h5>Lorem ipsum dolor sit amet.</h5>
        <h6>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </h6>
    </div>
</div>

Tu código CSS se vería así:

.beneficios-image {
    width: 70% !important;
    height: 70% !important;
}

.texto-beneficio {
    border-left-color: #0ff;
    border-left-style: solid;
    border-left-width: 2px; /* Cambiando este valor, puedes cambiar el ancho del borde */
    padding-right: 12px; /* Con este padding, puedes separar el texto del borde */ 
}

También puedes resumir el border-left con:

.texto-beneficio {
    border-left: 2px solid #0ff;
    padding-right: 12px;
} 
1

Si lo que deseas es que tanto la línea horizontal como la vertical estén en el mismo renglón, debes tener en consideración lo siguiente:

  • Deberías usar una etiqueta span para la línea vertical que deseas esta se comporta en línea y la etiqueta p que se comporta como bloque1
  • Dado que p se comporta a lo largo de su contenedor padre, entonces debemos anular ese comportamiento, indicando que su display ahora sea inline para que aparezca a lado de la etiqueta span
  • No deberías usar ni hr ni br por que tienen fines distintos que puedes revisar en el enlace que dejo mas abajo 2

Quedando el código mas o menos así, a modo de ejemplo

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Ejemplo</title>
      <style>
        p{
          background-color: red;
          display: inline;
          margin: 10px;
        }
        span{
          border: 2px solid blue;
        }
      </style>
    </head>
    <body>
      <span></span>
    <p>Hola hola hola hola </p>
    </body>
    </html>

Referencias

1
  • La linea vertical solo se muestra en la primera linea del párrafo, intente cambiarle el alto al span pero seguía igual, quisiera que la linea ocupara todo el alto en esta caso que ocupe las 3 lineas del parrafo Commented el 21 oct. 2019 a las 0:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.