Comment faire une ligne verticale en HTML

Question

Comment créez-vous une ligne verticale en utilisant HTML ?

Answer 1

Entourez le markup où vous voulez que la ligne apparaisse avec un

, et utilisez CSS pour le styler :

.verticalLine {
  border-left: thick solid #ff0000;
}

  some other content

Answer 2

Vous pouvez utiliser la balise de règle horizontale pour créer des lignes verticales.

En utilisant une largeur minimale et une grande taille, la règle horizontale devient une règle verticale.

Answer 3

Vous pouvez utiliser un

vide qui est stylé exactement comme vous souhaitez que la ligne apparaisse :

HTML:

Avec une hauteur exacte (en remplaçant le style en ligne) :

  div.vertical-line{
      width: 1px; /* Largeur de la ligne */
      background-color: black; /* Couleur de la ligne */
      height: 100%; /* Remplacer en ligne si vous voulez une hauteur spécifique */
      float: left; /* Fait flotter la ligne à gauche du contenu.
        Vous pouvez plutôt utiliser position:absolute ou display:inline-block
        si cela correspond mieux à votre design */
    }

Stylisez la bordure si vous voulez un effet 3D :

    div.vertical-line{
      width: 0px; /* Utiliser uniquement le style de bordure */
      height: 100%;
      float: left; 
      border: 1px inset; /* C'est le style de bordure par défaut pour la balise  */
    }

Vous pouvez bien sûr aussi expérimenter avec des combinaisons avancées :

  div.vertical-line{
      width: 1px;
      background-color: silver;
      height: 100%;
      float: left;
      border: 2px ridge silver ;
      border-radius: 2px;
    }

Answer 4

Vous pouvez également créer une ligne verticale en utilisant la balise de ligne horizontale HTML

---

html, body{height: 100%;}

hr.vertical {
  width: 0px;
  height: 100%;
  /* ou hauteur en PX */
}

Answer 5

Il n'existe pas d'équivalent vertical à l'élément

---

. Cependant, une approche que vous pouvez essayer est d'utiliser une simple bordure à gauche ou à droite de ce que vous séparez :

#your_col {
  border-left: 1px solid black;
}

  Votre contenu ici