Es bastante fácil insertar o dibujar una línea horizontal en html. Pero, ¿cómo se dibuja una línea vertical en html? A diferencia de la línea horizontal, no hay una sola etiqueta en html que dibuje la línea vertical. Pero eso no significa que sea imposible hacerlo.
Usando CSS
Una forma de hacer esto es usar las etiquetas html con hojas de estilo en cascada o CSS.
Usaremos la etiqueta div en html para dibujar un bloque en la página. En la etiqueta div, puede usar la propiedad border-left o border-right para dibujar los bordes del bloque. Combinado con la propiedad de altura del div, terminará dibujando una línea vertical de la longitud deseada.
<style>.vertical { height: 300px; border-left: 2px solid black; position: absolute; left: 50%;}</style><div class="vertical"/>
- altura: la altura se puede usar para especificar la longitud de la línea en la página.
- border-left: esta es la opción especificar qué tipo de línea te gusta. el ejemplo es una línea negra sólida de 2 píxeles de grosor. Puedes tener líneas discontinuas o una línea mucho más gruesa.
- posición e izquierda: estos dos juntos especifican en qué parte de la página necesita la línea alineada horizontalmente. Cualquiera de los atributos que colocarán el div apropiadamente se puede usar para posicionar la línea en la página
La salida del código anterior se mostrará como una línea vertical negra sólida en el centro de la página.
Hay varias combinaciones diferentes que son posibles. Por ejemplo, puede usar las propiedades borde izquierdo y borde derecho juntas para dibujar dos líneas verticales una al lado de la otra. Asegúrese de especificar el ancho del div si está dibujando dos líneas. Eso determinará la distancia entre las dos líneas verticales.
Puede variar el tamaño o el grosor de la línea utilizando el número de píxeles. Casi todas las variaciones que se pueden usar para dibujar una línea horizontal también se pueden usar para dibujar la línea vertical.
El uso de una etiqueta de contenedor como div también le dará la capacidad de dibujar una línea vertical junto a un bloque de texto, si eso es lo que necesita. El uso de una etiqueta de contenedor le da la flexibilidad de dibujar no solo líneas verticales, sino también líneas horizontales alrededor del texto. Para hacerlo, puedes hacer algo como esto:
<div style="border-left: 2px solid black; border-right: 2px dashed green; width: 70em;"> <div style="padding-left: 2em;"> <p>The output of the above code will display as a solid black vertical line in the middle of the page.</p> <p>There are several different combinations that are possible. For example, you can use both the border-left and the border-right properties together to draw two vertical lines side by side. Be sure to specify the width of the div if you are drawing two lines. That will determine the distance between the two vertical lines.</p> <p>You can vary the size or thickness of the line using the pixel count. Almost all variations that you can use to draw a horizontal line can be used to draw the vertical line as well.</p> </div></div>
he utilizado el estilo en línea atributo en los ejemplos aquí, pero lo ideal sería utilizar una hoja de estilo externa y se pueden volver a utilizar estas con el atributo de clase. Eso le dará la capacidad de tener un aspecto y una sensación uniformes en todas sus páginas web.
Usando la etiqueta hr
La etiqueta HTML para insertar una línea horizontal es la etiqueta hr. También puede usar la misma etiqueta para insertar la línea vertical, pero aún así tendrá que especificar el ancho y el tamaño para formatear la línea. Por lo tanto, todo lo que probablemente haces es usar la etiqueta hr en lugar de la etiqueta div en el ejemplo anterior.
Aún así, puede ser bastante simple de usar si no necesita ningún formato elegante. Especifique el atributo width para establecer el grosor de la línea y el atributo size para especificar la longitud o la altura de la línea.
<hr width="1" size="300"/>
Usar el div le dará mucha más flexibilidad para controlar el tamaño y el tipo de línea que desea dibujar, así como para dibujar varias líneas. Bueno, podrías dibujar la línea horizontal de la misma manera, usando las propiedades borde-superior o borde-inferior en lugar de las propiedades izquierda y derecha que habíamos usado.