Il est assez facile d’insérer ou de dessiner une ligne horizontale en html. Mais comment tracez-vous une ligne verticale en html? Contrairement à la ligne horizontale, il n’y a pas de balise unique en html qui tracera la ligne verticale. Mais cela ne signifie pas qu’il est impossible de le faire.
En utilisant CSS
Une façon de le faire est d’utiliser les balises HTML avec des feuilles de style en cascade ou CSS.
Nous utiliserons la balise div en html pour dessiner un bloc dans la page. Sur la balise div, vous pouvez utiliser la propriété border-left ou la propriété border-right pour dessiner les bordures du bloc. Combiné à la propriété height du div, vous finirez par tracer une ligne verticale de la longueur souhaitée.
<style>.vertical { height: 300px; border-left: 2px solid black; position: absolute; left: 50%;}</style><div class="vertical"/>
- hauteur: la hauteur peut être utilisée pour spécifier la longueur de la ligne sur la page.
- border-left: il s’agit de spécifier le type de ligne que vous aimez. l’exemple est une ligne noire pleine de 2 pixels d’épaisseur. Vous pouvez avoir des lignes pointillées ou une ligne beaucoup plus épaisse.
- position et gauche: ces deux spécifient ensemble où, dans la page, vous devez aligner la ligne horizontalement. Tous les attributs qui placeront le div de manière appropriée peuvent être utilisés pour positionner la ligne sur la page
La sortie du code ci-dessus s’affichera sous la forme d’une ligne verticale noire continue au milieu de la page.
Plusieurs combinaisons différentes sont possibles. Par exemple, vous pouvez utiliser les propriétés border-left et border-right ensemble pour tracer deux lignes verticales côte à côte. Assurez-vous de spécifier la largeur de la div si vous dessinez deux lignes. Cela déterminera la distance entre les deux lignes verticales.
Vous pouvez varier la taille ou l’épaisseur de la ligne en utilisant le nombre de pixels. Presque toutes les variantes que vous pouvez utiliser pour tracer une ligne horizontale peuvent également être utilisées pour tracer la ligne verticale.
L’utilisation d’une balise de conteneur telle que div vous donnera également la possibilité de tracer une ligne verticale à côté d’un bloc de texte, si c’est ce dont vous avez besoin. L’utilisation d’une balise de conteneur vous donne la possibilité de dessiner non seulement des lignes verticales, mais également des lignes horizontales autour du texte. Pour ce faire, vous pouvez faire quelque chose comme ceci:
<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>
J’ai utilisé l’attribut de style en ligne dans les exemples ici, mais idéalement, vous utiliseriez une feuille de style externe et vous pouvez les réutiliser avec l’attribut class. Cela vous donnera la possibilité d’avoir une apparence et une sensation cohérentes sur toutes vos pages Web.
Utilisation de la balise hr
La balise HTML pour insérer une ligne horizontale est la balise hr. Vous pouvez également utiliser la même balise pour insérer la ligne verticale, mais vous devrez toujours spécifier la largeur et la taille pour formater la ligne. Donc, tout ce que vous faites probablement est d’utiliser la balise hr au lieu de la balise div dans l’exemple précédent.
Pourtant, il peut être assez simple à utiliser si vous n’avez pas besoin de formatage sophistiqué. Vous spécifiez l’attribut width pour définir l’épaisseur de la ligne et l’attribut size pour spécifier la longueur ou la hauteur de la ligne.
<hr width="1" size="300"/>
L’utilisation de la div vous donnera beaucoup plus de flexibilité pour contrôler la taille et le type de ligne que vous souhaitez dessiner ainsi que pour dessiner plusieurs lignes. Eh bien, vous pouvez tracer la ligne horizontale de la même manière, en utilisant les propriétés border-top ou border-bottom au lieu des propriétés left et right que nous avions utilisées.