Placez un <div> autour du balisage à l'endroit où vous souhaitez que la ligne apparaisse ensuite, et utilisez CSS pour le styler:
.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 taille importante, la règle horizontale devient verticale.
Vous pouvez utiliser un <div> vide dont le style est identique à celui souhaité pour la ligne:
HTML:
<div class="vertical-line"></div>
Avec une hauteur exacte (style dominant 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 la bordure si vous voulez 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 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 à l'aide de la 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'élément <hr> . Cependant, une approche que vous pouvez essayer consiste à 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 aurez peut-être besoin de bidouiller un peu avec display:inline-block|inline parce que inline ne sera pas étendu 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 de 1 pixel et à définir la hauteur. Cette option vous permettrait de la faire flotter là où vous le souhaitez.
Pas la solution la plus élégante cependant.
Il n'y a pas de balise pour créer une ligne verticale en HTML.
Méthode: Vous chargez une image de ligne. Ensuite, vous définissez son style comme
"height: 100px ; width: 2px"Méthode: Vous pouvez utiliser
<td>balises<td style="border-left: 1px solid red; padding: 5px;"> X </td>
J'ai utilisé une combinaison du code "hr" suggéré, et voici à quoi mon code ressemble:
<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 dans une div, je pense que vous pouvez utiliser ce code. Le "conteneur" pourrait bien être 100% largeur, 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"> </div>
</div>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>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);
}
Pourquoi ne pas utiliser & # 124, qui est le caractère spécial html pour |
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 maintenant supportés par la plupart des navigateurs modernes. Mais certains anciens navigateurs (tels que IE 8 et versions antérieures) ne le prennent pas en charge.
Si votre objectif est de placer des lignes verticales dans un conteneur afin de séparer les éléments enfants côte à côte (éléments de colonne), vous pouvez envisager de styliser le conteneur comme suit:
.container > *:not(:first-child) {
border-left: solid gray 2px;
}
Cela ajoute une bordure gauche à tous les éléments enfants à partir du 2e enfant. En d'autres termes, vous obtenez des frontières verticales entre les enfants adjacents.
>est un sélecteur d'enfants. Cela correspond à n'importe quel enfant des éléments spécifiés à gauche.*est un sélecteur universel. Cela correspond à un élément de n'importe quel type.:not(:first-child)signifie que ce n'est pas le premier enfant de son parent.
Prise en charge du navigateur: > *: first-child et : not ()
Je pense que cela vaut 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, et non des règles des différents éléments enfants.
Que cela soit mieux que d'utiliser un élément de règle vertical improvisé (en stylant une règle horizontale, etc.) dépendra de votre cas d'utilisation, mais il s'agit au moins d'une alternative.
ligne verticale jusqu'au 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 styler une heure.
Maintenant, quand 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 à gauche, vous pouvez l'inverser pour le positionner à droite.
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;
Faites pivoter un <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 le positionne directement au centre.