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

<hr width="1" size="500">

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

Vous pouvez utiliser un <div> vide qui est de style exactement comme vous voulez que la ligne apparaisse:

HTML:

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

Avec hauteur exacte (Style supérieur en ligne):

  div.vertical-line{
      width: 1px; /* Line width */
      background-color: black; /* Line color */
      height: 100%; /* Override in-line if you want specific height. */
      float: left; /* Causes the line to float to left of content. 
        You can instead use position:absolute or display:inline-block
        if this fits better with your design */
    }

<div class="vertical-line" style="height: 45px;"></div>

Style de la bordure si vous voulez un look 3D:

    div.vertical-line{
      width: 0px; /* Use only border style */
      height: 100%;
      float: left; 
      border: 1px inset; /* This is default border style for <hr> tag */
    }

   <div class="vertical-line" style="height: 45px;"></div>

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;
    }

 <div class="vertical-line" style="height: 45px;"></div>

Vous pouvez également créer une ligne verticale en utilisant HTML horizontal line <hr />

html, body{height: 100%;}

hr.vertical {
  width: 0px;
  height: 100%;
  /* or height in PX */
}

<hr class="vertical" />

Il n'y a pas d'équivalent à la verticale <hr> de l'élément. Cependant, une approche que vous voudrez peut-être essayer est d'utiliser une simple bordure à gauche ou à droite de ce que vous séparez:

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

<div id="your_col">
  Your content here
</div>

HTML5 éléments personnalisés (ou CSS pur)

1. javascript

Enregistrez votre élément.

var vr = document.registerElement('v-r'); // vertical rule please, yes!

*Le - est obligatoire dans tous les éléments personnalisés.

2. css

v-r {
    height: 100%;
    width: 1px;
    border-left: 1px solid gray;
    /*display: inline-block;*/    
    /*margin: 0 auto;*/
}

*Vous devrez peut-être jouer un peu avec display:inline-block|inline Car inline ne s'étendra pas à la hauteur de l'élément contenant. Utilisez la marge pour centrer la ligne dans un conteneur.

3. instancier

js: document.body.appendChild(new vr());
or
HTML: <v-r></v-r>

*malheureusement, vous ne pouvez pas créer de balises personnalisées à fermeture automatique.

Utilisation

 <h1>THIS<v-r></v-r>WORKS</h1>

Exemple: http://html5.qry.me/vertical-rule

Vous ne voulez pas jouer avec javascript?

Appliquez simplement cette classe CSS à votre élément désigné.

Css

.vr {
    height: 100%;
    width: 1px;
    border-left: 1px solid gray;
    /*display: inline-block;*/    
    /*margin: 0 auto;*/
}

*Voir les notes ci-dessus.

Une autre option consiste à utiliser une image de 1 pixel et à définir la hauteur-cette option vous permettrait de la faire flotter là où vous devez être.

Pas la solution la plus élégante cependant.

Il n'y a pas de balise pour créer une ligne verticale en HTML.

1. Méthode: Vous chargez une image en ligne. Vous pouvez alors définir son style comme "height: 100px ; width: 2px"

2. Méthode: vous pouvez utiliser les balises <td><td style="border-left: 1px solid red; padding: 5px;"> X </td>

Pourquoi ne pas utiliser & # 124, qui est le caractère spécial html pour /

Vous pouvez utiliser la balise hr (ligne horizontale) et la faire pivoter de 90 degrés avec css ci-dessous

hr {   
    transform:rotate(90deg);
    -o-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
}

Http://jsfiddle.net/haykaghabekyan/0c969bm6/1/

J'ai utilisé une combinaison du code" hr " suggéré, et voici à quoi ressemble mon code:

<hr style="width:0.5px; height:500px; position: absolute; left: 315px;"/>

J'ai simplement changé la valeur de la valeur de pixel "gauche" pour la positionner. (J'ai utilisé la ligne verticale pour aligner le contenu sur ma page Web, puis je l'ai supprimé.)

Si votre objectif est de placer des lignes verticales dans un conteneur pour séparer les éléments enfants côte à côte (éléments de colonne) , vous pouvez envisager de styliser le conteneur comme ceci:

.container > *:not(:first-child) {
  border-left: solid gray 2px;
}

Cela ajoute une bordure gauche à tous les éléments enfants à partir du 2ème enfant. En d'autres termes, vous obtenez des frontières verticales entre les enfants adjacents.

• {[1] } est un sélecteur enfant. Il correspond à n'importe quel enfant du ou des éléments spécifiés à gauche.
• * est un sélecteur universel. Elle correspond à une élément de n'importe quel type.
• :not(:first-child) signifie que ce n'est pas le premier enfant de son parent.

Support du navigateur: >*: premier enfant et : non()

Je pense que c'est mieux qu'une simple règle .child-except-first {border-left: ...}, car il est plus logique que les lignes verticales proviennent des règles du conteneur, pas des règles des différents éléments enfants.

Si c'est mieux que d'utiliser un élément de règle verticale de fortune (en stylisant une règle horizontale, etc.) dépendra de votre cas d'utilisation, mais c'est une alternative au moins.

Une autre approche est possible: utiliser SVG .

Par exemple:

<svg height="210" width="500">
    <line x1="0" y1="0" x2="0" y2="100" style="stroke:rgb(255,0,0);stroke-width:2" />
      Sorry, your browser does not support inline SVG.
</svg>

Avantages:

• vous pouvez avoir une ligne de n'importe quelle longueur et orientation.
• , Vous pouvez spécifier la largeur, la couleur facilement

Inconvénients :

• SVG sont maintenant pris en charge sur la plupart des navigateurs modernes. Mais certains anciens navigateurs (comme IE 8 et plus) ne le supportent pas.

Pour ajouter une ligne verticale, vous devez styliser un hr.

Maintenant, lorsque vous faites une ligne verticale, elle apparaîtra au milieu de la page:

<hr style="width:0.5px;height:500px;"/>

Maintenant, pour le mettre où vous voulez, vous pouvez utiliser ce code:

<hr style="width:0.5px;height:500px;margin-left:-500px;margin-right:500px;"/>

Cela le positionnera vers la gauche, vous pouvez l'Inverser pour le positionner vers la droite.

Ligne verticale droite à la div

    <div style="width:50%">
        <div style="border-right:1px solid;">
            <ul>
                <li>
                    Empty div didn't shows line
                </li>
                <li>
                    Vertical line length depends on the content in the div
                </li>
                <li>
                    Here I am using inline style. You can replace it by external style or internal style.
                </li>
            </ul>
        </div>
    </div>
  

Ligne Verticale à gauche de la div

    <div style="width:50%">
        <div style="border-left:1px solid;">
            <ul>
                <li>
                    Empty div didn't shows line
                </li>
                <li>
                    Vertical line length depends on the content in the div
                </li>
                <li>
                    Here I am using inline style. You can replace it by external style or internal style.
                </li>
            </ul>
        </div>
    </div>
  

Pour créer une ligne verticale centrée dans un div, je pense que vous pouvez utiliser ce code. Le' conteneur ' pourrait bien avoir une largeur de 100%, je suppose.

div.container {
  width: 400px;
}

div.vertical-line {
  border-left: 1px solid #808080;
  height: 350px;
  margin-left: auto;
  margin-right: auto;
  width: 1px;
}

<div class="container">
  <div class="vertical-line">&nbsp;</div>
</div>

, Vous pouvez dessiner une ligne verticale en utilisant simplement la hauteur / largeur avec n'importe quel élément html.

#verticle-line {
  width: 1px;
  min-height: 400px;
  background: red;
}

<div id="verticle-line"></div>

Dans l'élément précédent après lequel vous souhaitez appliquer la ligne verticale, vous pouvez définir CSS ...

border-right-width: thin;
border-right-color: black;
border-right-style: solid;

Pour un style en ligne, j'ai utilisé ce code:

<div style="border-left:1px black solid; position:absolute; left:50%; height:300px;" />

Et qui l'a positionné directement au centre.

Pour centrer la ligne verticale au milieu, utilisez:

position: absolute; 
left: 50%;