Créer une ligne verticale en HTML

1. Utilisez la propriété CSS border-left pour créer une ligne verticale en HTML
2. Ajustez la balise hr pour créer une ligne verticale en HTML

Cet article présentera quelques façons de créer une ligne verticale en HTML.

Utilisez la propriété CSS border-left pour créer une ligne verticale en HTML

En HTML, on utilise la balise hr pour créer une ligne horizontale, mais il n’y a pas de balise pour créer une ligne verticale. Cependant, nous pouvons simuler une ligne verticale en utilisant la propriété CSS border-left.

La propriété border-left est utilisée pour styliser la bordure sur le côté gauche. Cette propriété est l’abréviation des propriétés border-left width, border-left style et border-left color.

Utiliser uniquement la propriété border-left créera une ligne verticale. Nous pouvons créer un conteneur en HTML, le sélectionner et appliquer la propriété pour obtenir une ligne verticale.

Par exemple, créez un div avec la classe v-line en HTML, puis sélectionnez v-line et appliquez-lui quelques styles. Définissez la propriété border-left sur thick solid #000.

Ensuite, réglez la height sur 100% et left sur 50%. Enfin, définissez la propriété position sur absolute.

Ici, nous aurons une bordure noire au milieu de la page Web. De cette façon, nous pouvons créer une ligne verticale en utilisant la propriété CSS border-left en HTML.

Exemple de code :

<div class="v-line">
</div>

.v-line{
 border-left: thick solid #000;
 height:100%;
 left: 50%;
 position: absolute;
}

Ajustez la balise hr pour créer une ligne verticale en HTML

Nous pouvons modifier la balise hr et créer une ligne verticale en HTML.

La balise hr est utilisée pour créer une ligne horizontale. On peut utiliser la valeur maximale pour la height et la valeur minimale pour la width de la balise hr.

De cette façon, la hauteur de la ligne horizontale s’allongera et la largeur rétrécira. Nous pouvons appliquer la même couleur pour la ligne horizontale et sa bordure pour la rendre verticale.

Par exemple, créez une balise hr en HTML. En CSS, réglez la height de la balise hr sur 100vh et la width sur .5vw.

Ensuite, définissez la border-width sur 0. Enfin, définissez la color et background-color de la ligne sur #000.

Ici, nous définissons la valeur 0 sur border-width afin que la ligne verticale soit plus fine. De cette façon, nous avons créé une ligne verticale en utilisant la balise hr en HTML.

Exemple de code :

<hr>

hr{
 height:100vh;
 width:.5vw;
 border-width:0;
 color:#000;
 background-color:#000;
}