Dibujar líneas y separadores en HTML usando CSS

Resumen

En este post te mostraré a dibujar una línea horizontal en un documento HTML ya que sirve como un remplazo para la etiqueta hr.

Esta línea de la que hablo también sirve para cuando debemos imprimir algo y la persona debe poner una firma. Por ejemplo.

Veremos cómo dibujar una línea que ocupa todo el ancho o que ocupa una longitud fija.

No vamos a usar JavaScript, solo un elemento div y estilos CSS.

Estilizar línea horizontal con CSS

Debemos definir un div que no tenga nada en su interior, pero que tenga un borde. Gracias a esto dibujamos una línea con CSS, pues es un div muy delgado.

El estilo queda así:

Tiene un borde superior de un pixel. Una altura de 2 pixeles y una máxima longitud de 200 px.

Esto de max-width es para que la línea no ocupe todo el ancho.

Definimos un padding de 0 para quitarle todo el relleno que pudiera tener.

Finalmente definimos el margen según las manecillas del reloj: arriba 20 px (esto es por si se necesita una firma, no es obligatorio si solo se desea la línea) a la derecha auto (para centrar) abajo 0 y a la derecha auto.

Definimos un div con esa clase y listo:

Con el siguiente resultado:

Así tenemos una línea reutilizable. Puedes ver una demostración aquí.

Alinear a la izquierda

Si no quieres que la línea se centre, coloca el margen así:

margin: 0;

 

Línea que ocupa todo el ancho disponible

Si quieres usar esta línea como un separador o simplemente quieres que ocupe todo el ancho, no pongas un max-width.

Veamos el ejemplo. Primero modificamos la clase:

Y al aplicarla:

Línea con estilo CSS que ocupa todo el ancho disponible

De igual modo, puedes ver la demostración en este enlace.

Ejemplo de nombre con firma

Como lo dije, esta línea sirve para poner el nombre de una persona, imprimir el documento y hacer que se firme.

Veamos un ejemplo. Voy a modificar un poco el CSS para agregar más margen y una centrar párrafos:

Ahora dentro del HTML tenemos lo siguiente:

Al final del texto he agregado el div junto con el nombre y un mensaje. La salida es la siguiente:

Gracias a que agregamos más margen superior, hay un espacio más grande para firmar.

Puedes probar el ejemplo aquí.

Líneas dobles

Eres libre de colocar dos divs con la misma clase, así podrías tener dos líneas. Solo asegúrate de modificar los márgenes.

Otro ejemplo de uso

Esto que expongo aquí fue usado en un horario de clases en el que trabajé hace unos días. El mismo debe ir firmado por el director y el supervisor.

Quedó así:

Eres libre de modificar el código para adaptarlo a tus necesidades.

Si quieres, puedes aprender más sobre CSS o la web en general leyendo mi blog.

Encantado de ayudarte


Estoy disponible para trabajar en tu proyecto, modificar el programa del post o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.

No te pierdas ninguno de mis posts

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

Dejar un comentario