Comment faites-vous une ligne verticale en utilisant HTML?

Placez un <div>autour du balisage à l'endroit où vous souhaitez que la ligne apparaisse ensuite, et utilisez CSS pour le styliser:

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

<div class="verticalLine">
  some other content
</div>

Vous pouvez utiliser la balise de 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 vide <div>dont le style est exactement comme vous voulez que la ligne apparaisse:

HTML:

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

Avec hauteur exacte (style prioritaire 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>

Stylisez 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 également 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 une ligne horizontale HTML <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 vertical à l' <hr>élément. Cependant, une approche que vous voudrez peut-être essayer est d'utiliser une simple bordure à gauche ou à droite de tout ce que vous séparez:

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

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

Éléments personnalisés HTML5 (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|inlinecar inlineil ne se développera pas pour contenir la hauteur de l'élément. 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 à fermeture automatique personnalisées.

usage

 <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 à 1 pixel et à définir la hauteur - cette option vous permettrait de la faire flotter là où vous devez être.

Ce n'est pas la solution la plus élégante.

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

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

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

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

1. Méthode: vous chargez une image de ligne. Ensuite, vous définissez son style comme"height: 100px ; width: 2px"

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

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 "h" 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 de ma page Web, puis je l'ai supprimé.)

Pour créer une ligne verticale centrée à l'intérieur d'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>

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

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 bordures verticales entre les enfants adjacents.

• >est un sélecteur d'enfant. Il correspond à tout enfant des éléments spécifiés à gauche.
• *est un sélecteur universel. Il correspond à un élément de tout type.
• :not(:first-child) signifie que ce n'est pas le premier enfant de son parent.

Prise en charge du navigateur: > *: premier enfant et : non ()

Je pense que c'est mieux qu'une .child-except-first {border-left: ...}règle simple , 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.

Que ce soit 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 au moins une alternative.

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

Les inconvénients :

• Les SVG sont désormais pris en charge sur la plupart des navigateurs modernes. Mais certains anciens navigateurs (comme IE 8 et les versions antérieures) ne le prennent pas en charge.

Ligne verticale jusqu'à 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 du 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 ajouter une ligne verticale, vous devez styliser une heure.

Maintenant, lorsque vous tracez 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 à gauche, vous pouvez l'inverser pour le positionner à droite.

Il y a une <hr>balise pour la ligne horizontale. Il peut être utilisé avec CSS pour créer également une ligne horizontale:

.divider{
    margin-left: 5px;
    margin-right: 5px;
    height: 100px;
    width: 1px;
    background-color: red;
}

<hr class="divider">

La propriété width détermine l'épaisseur de la ligne. La propriété height détermine la longueur de la ligne. La propriété background-color détermine la couleur de la ligne.

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;

Rotation de <hr>90 degrés:

<hr style="width:100px; transform:rotate(90deg);">

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.

J'avais besoin d'une ligne verticale en ligne, alors j'ai trompé un bouton pour qu'il devienne une ligne.

<button type="button" class="v_line">l</button>

.v_line {
         width: 0px;
         padding: .5em .5px;
         background-color: black;
         margin: 0px; 4px;
        }

<div style="width:1px;background-color:#C0C0C0;"></div>

Cela a très bien fonctionné pour moi

Pour que la ligne verticale soit centrée au milieu, utilisez:

position: absolute; 
left: 50%;