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í:
.linea {
border-top: 1px solid black;
height: 2px;
max-width: 200px;
padding: 0;
margin: 20px auto 0 auto;
}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:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Línea horizontal con CSS</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Línea horizontal con CSS</h1>
<a href="//parzibyte.me/blog">By Parzibyte</a>
<div class="linea"></div>
</body>
</html>Con el siguiente resultado:
Así tenemos una línea reutilizable.
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:
.linea {
border-top: 1px solid black;
height: 2px;
padding: 0;
margin: 20px auto 0 auto;
}Y al aplicarla:
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:
.linea {
border-top: 1px solid black;
height: 2px;
max-width: 200px;
padding: 0;
margin: 50px auto 0 auto;
}
.centrado{
text-align: center;
}Ahora dentro del HTML tenemos lo siguiente:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Línea horizontal con CSS</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Línea horizontal con CSS</h1>
<a href="//parzibyte.me/blog">By Parzibyte</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis libero nisi. Suspendisse potenti. Fusce et rhoncus
turpis. Aenean egestas dolor felis, at consequat orci scelerisque nec. Quisque tempus lacinia leo, ut molestie nulla dignissim
vel. Praesent malesuada dolor ac lacus ultrices, nec ultricies purus scelerisque. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Proin ipsum urna, fermentum in enim ac, scelerisque sagittis odio.
Pellentesque et sapien vel ligula pulvinar finibus vitae sit amet arcu. Suspendisse tempor vehicula orci, et rutrum ante
vehicula in. Sed eu dictum orci. Suspendisse quis dui fermentum, ornare tellus in, viverra urna. Nam maximus, nisi eu lacinia
laoreet, augue augue porta risus, et convallis diam urna vel risus. Fusce orci metus, bibendum vitae justo a, pulvinar
suscipit nunc.</p>
<p>Sin más por el momento, me despido de usted de manera amable</p>
<div class="centrado">
<strong>Atentamente</strong>
<div class="linea"></div>
<p>Luis Cabrera Benito</p>
</div>
</body>
</html>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.
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.
