133

Je sais qu'il y a une hr (règle horizontale) en html, mais je ne crois pas qu'il y ait une vr (règle verticale). Ai-je tort et si non, pourquoi n'y a-t-il pas de règle verticale?

html Xaisoft
la source

17

C'est une question morte, mais avec la spécification CSS3 maintenant sortie, vous pouvez utiliser transform: rotate (90deg) pour créer une règle verticale et horizontale.

Jules

3

Si vous utilisez flexbox sous forme de lignes (display: flex; flex-direction: row;), les hréléments deviendront automatiquement verticaux. Il vous suffit de définir sa heightpropriété (par exemple, hauteur: 80%;).

Rodrigo

156

Non, il n'y a pas de règle verticale.

Cela n'a pas de sens logique d'en avoir un. Le HTML est analysé séquentiellement, ce qui signifie que vous disposez votre code HTML de haut en bas, de gauche à droite comme vous voulez qu'il apparaisse de haut en bas, de gauche à droite (généralement)

Une balise vr ne suit pas ce paradigme.

Cependant, c'est facile à faire en utilisant CSS. Ex:

<div style="border-left:1px solid #000;height:500px"></div>

Notez que vous devez spécifier une hauteur ou remplir le conteneur de contenu.

Andy Baird
la source

4

Les tableaux peuvent séparer les éléments verticalement, donc ce que vous dites n'est pas la vraie raison pour laquelle il n'y a pas de balise vr.

CiscoIPPhone

6

Ce n'est pas pourquoi des tableaux ont été ajoutés à la spécification HTML. Les tableaux servent à afficher les données tabulées. Presque tous les éléments HTML peuvent être utilisés pour séparer les éléments verticalement (tout ce que vous définissez pour afficher: bloc et flottant: à gauche avec n'importe quelle hauteur définie)

Andy Baird

19

erf. J'essayais de dire que si les choses peuvent déjà être séparées verticalement, comment l'ajout d'un vr ne suivrait-il pas le paradigme HTML?

CiscoIPPhone

4

@CiscoIPPhone - La séparation verticale nécessiterait une règle horizontale. La séparation latérale exigerait une règle verticale. Ergo, Andy Baird a raison, je pense.

Joshua

3

Je ne peux pas convenir que cela ne suit pas le paradigme. Comme vous l'avez dit, il est analysé séquentiellement, de haut en bas, de gauche à droite. Vous pouvez diviser le contenu qui va de gauche à droite avec une règle verticale. Dans les premiers jours du HTML, je conviens que cela n'aurait pas eu de sens logique. Maintenant, une règle verticale est une chose souvent utilisée en HTML, même s'il n'y a pas de balise sémantiquement correcte pour cela. Juste mes deux cents.

Hendeca

37

Vous pouvez créer une règle verticale comme celle-ci: <hr style="width: 1px; height: 20px; display: inline-block;">

mat
la source

16

Comme d’autres l’ont souligné, le concept de règle verticale ne correspond pas aux idées originales qui sous-tendent la structure et la présentation des documents HTML. Cependant, ces jours-ci (en particulier avec la prolifération des applications Web), il existe un petit nombre de scénarios où cela serait en effet utile.

Par exemple, considérons un menu de navigation horizontal fixé en haut de l'écran, similaire à la barre de menus dans la plupart des applications GUI fenêtrées. Vous avez plusieurs éléments de menu de niveau supérieur disposés de gauche à droite qui, lorsque vous cliquez dessus, ouvrent les menus déroulants. Il y a des années, c'était une pratique courante de créer cela avec une table à une seule ligne, mais c'est du mauvais HTML et il est largement reconnu que la bonne façon de procéder serait une liste avec du CSS fortement personnalisé.

Maintenant, disons que vous souhaitez regrouper des éléments similaires, mais ajoutez un séparateur vertical entre les groupes, pour obtenir quelque chose comme ceci:

[Item 1a] [Item 1b] | [Item 2a] [Item 2b]

L'utilisation <hr style="width: 1px; height: 100%; ..." />fonctionne, mais peut être considérée comme sémantiquement incorrecte car vous changez à quoi sert réellement cet élément. De plus, vous ne pouvez pas l'utiliser dans certains éléments où la DTD HTML autorise uniquement les éléments de niveau en ligne (par exemple dans un élément).

Une meilleure option serait , cependant, que tous les navigateurs ne prennent pas en charge la display: inline-block;propriété CSS, donc la seule véritable option au niveau en ligne est d'utiliser une image comme celle-ci:

<img src="pixel.gif" alt="|" style="width:1px; height:100%; background:#000; margin: 0 2px;" />

Cela a l'avantage supplémentaire d'être compatible avec les navigateurs de texte uniquement (comme lynx) car le caractère pipe est affiché à la place de l'image. (Cela m'ennuie toujours que M $ IE utilise incorrectement le texte alternatif comme info-bulle; c'est à cela que sert l'attribut title!)

marguerite
la source

8

<style type="text/css">
.vr
{
  display:inline;
  height:100%;
  width:1px;
  border:1px inset;
  margin:5px
}
</style>

<div style="font-size:50px">Vertical Rule: &rarr;<div class="vr"></div>&larr;</div>

Essaye le.

Veniamin Ilmer
la source

8

Un <hr> à l'intérieur d'un display: flex le fera s'afficher verticalement.

JSFiddle: https://jsfiddle.net/w6y5t1kL/

Exemple:

<div style="display:flex;">
  <div>
    Content
    <ul>
      <li>Continued content...</li>
    </ul>
  </div>
  <hr>
  <div>
    Content
    <ul>
      <li>Continued content...</li>
    </ul>
  </div>
</div>

Nixinova
la source

7

Que diriez-vous:

writing-mode:tb-rl

Où haut-> bas, droite-> gauche?

Nous aurons besoin d'une règle verticale pour cela.

vscpp
la source

C'est un bon point. Cependant, cela signifie rendre la page d'une manière non conventionnelle car vous devez rivaliser avec tous les autres éléments du dom. Avez-vous déjà remarqué qu'il existe parfois des différences de rendu entre les navigateurs? ;) ~ Néanmoins, très bon point .

jcolebrand

3

Il n'y en a pas, où irait-il?

Utilisez CSS pour mettre une bordure droite sur un élément si vous voulez quelque chose comme ça.

Chad Birch
la source

2

HTML a peu ou pas de positionnement vertical en raison de la nature typographique de la mise en page du contenu. La règle verticale ne correspond tout simplement pas à sa sémantique.

myroslav
la source

2

Essayez-le et vous saurez vous-même:

<body>
rokon<br />
rkn <hr style="width: 1px; height: 10px; display: inline; margin-left: 2px; margin-right: 2px;" />rockon<br />
rocks
</body>
</html>

Muhammad Rokonuzzaman
la source

2

vous pouvez faire de 2 manières:

créez le style comme vous l'avez déjà donné dans div mais changez border-left en border-right
prendre une image et faire sa largeur 1-2 px

BoltClock
la source

2

Ancienne question mais j'ai résolu cela avec display:flex;et cela fonctionne très bien:

<div style="display:flex;border:1px dotted black;margin-bottom:20px;">
    <div>
        This is a div
    </div>
    <div style="border-left:1px solid black;margin:0 7.5px;"></div>
    <div>
        This is another div
    </div>  
</div>

https://jsfiddle.net/6qfd59vm/3/

Cette solution ne nécessite pas non plus de hauteur fixe.

Tero Heiskanen
la source

Solution du futur, mais probablement pas avant 2017-18 + :)

jave.web

2

Essaye ça.

Vous pouvez définir la hauteur et la largeur sur " div ", comme la portée de " hr ".

La marge de " hr " est utilisée pour l'alignement.

<div style="display: inline-flex; width: 25px; height: 100px;">
  <hr style="margin: 0px 0px 0px 12.5px;">
</div>

Développer l'extrait

Chung-Ming Wu
la source

2

Je sais que j'ajoute ma réponse très tardivement, mais cela en vaudrait la peine j'en suis sûr. Vous pouvez réaliser une ligne verticale en utilisant flexethr

Voir mon codepen ici .

Umesh
la source

2

Mieux vaut tard que jamais!

Jry9972

1

Dans le contexte d'un élément de liste utilisé comme navigation, une balise <vr /> serait parfaitement utile. La raison pour laquelle il n’existe pas est que «cela n’a pas de sens logique d’en avoir un» dans le contexte du HTML il y a dix ans.

joemaddalone
la source

1

Pour une utilisation dans la messagerie HTML pour la plupart des clients de bureau, vous devez utiliser des tableaux. Dans ce cas, vous pouvez utiliser une <hr>balise, avec un style en ligne nécessaire (mais simple), comme:

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

Bien sûr, le style avec CSS est plus flexible, mais GMail et autres ne permettent pas d'utiliser un style CSS autre que celui en ligne ...

desko
la source

1

Vous pouvez utiliser css pour simuler une ligne verticale et utiliser la classe sur le div

.vhLine {
  border-left: thick solid #000000;
}

Yaina Villafañes
la source

1

Vous pouvez le faire très facilement en

hr{
 transform: rotate(90deg);
}

<html>
<head>
</head>
<body>
<hr>
</body> 
</html>

Développer l'extrait

Faites attention à la hauteur et à la largeur des heures

Nitish
la source

1

É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|inlineparce queinline il ne sera pas étendu à 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 à 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.

lien vers la réponse originale sur SO .

Qwerty
la source

0

Vous pouvez créer une balise personnalisée en tant que telle:

<html>
<head>
<style>
vr {
display: inline-block;
// This is where you'd set the ruler color
background-color: black;
// This is where you'd set the ruler width
width: 2px;
//this is where you'd set the spacing between the ruler and surrounding text
margin: 0px 5px 0px 5px;
height: 100%;
vertical-align: top;
}
</style>
</head>
<body>
this is text <vr></vr> more text
</body>
</html>

(Si quelqu'un sait comment transformer cela en une balise "ouverte", par exemple, <hr>faites-le moi savoir et je le modifierai)

SRéjecter
la source

Vous pouvez le taguer court à<vr />

jave.web

0

Il n'y a pas de balise en HTML, mais vous pouvez utiliser |.

user3576467
la source

0

Vous pouvez utiliser la nouvelle balise SVG HTML5:

<svg style="position:absolute;width:100%;height:100%;">
    <line id="myVerticalLine" y1="0" y2="100" x1="0" x2="0">
    </line>
</svg>

1,21 gigawatts
la source

0

Je trouve facile de créer une image d'une ligne , puis de l'insérer dans le code en tant que «règle», en définissant la largeur et / ou la hauteur selon les besoins. Ce sont toutes des images à règle horizontale, mais rien ne m'empêche (ou vous) d'utiliser une image à «règle verticale».

C'est cool pour de nombreuses raisons; vous pouvez facilement utiliser différentes lignes, couleurs ou motifs comme "règles", et comme ils n'auraient pas de texte, même si vous l'aviez fait de manière "normale" en utilisant hr en HTML, cela ne devrait pas avoir d'incidence sur le référencement ou d'autres choses comme cette. Et le fichier image serait / devrait être très petit (1 ou 2 Ko au maximum).

Peter Jay
la source

Vous devez inclure un exemple de code pour illustrer la technique que vous suggérez.

Adam Katz

0

Trop de réponses trop compliquées. Créez simplement une balise TableData qui couvre le nombre de lignes que vous souhaitez utiliser en utilisant rowspan. Ensuite, utilisez la bordure droite pour la barre réelle.

Exemple:

<td rowspan="5" style="border-right-color: #000000; border-right-width: thin; border-right-style: solid">&nbsp;</td>
<td rowspan="5">&nbsp;</td>

Assurez-vous que le "& nbsp" de la deuxième ligne exécute le même nombre de lignes que la première. afin qu'il y ait un espacement approprié entre les deux.

Cette technique m'a plutôt bien servi avec mon temps en HTML5.

Kevin Andrew Fogg
la source

0

Aujourd'hui c'est possible avec CSS3

hr {
  background-color:black;
  color:black;
  -webkit-transform:rotate(90deg);
  position:absolute;
  width:100px;
  height:2px;
  left:100px;
}

chandelier
la source

0

Pour les personnes qui essaient de créer des colonnes pour le texte, il existe une propriété de règle de colonne que vous devriez envisager d'utiliser!

.content{
  margin: 20px 5%;
  padding: 5px;
  
}
.content p{
  -webkit-column-count: 3;
  -moz-column-count:3;
  -o-column-count:3;
  column-count: 3; 
  -webkit-column-rule: 1px solid #ccc;
  -moz-column-rule: 1px solid #ccc;
  -o-column-rule: 1px solid #ccc;
  column-rule: 1px solid #ccc;
 
  text-align: justify;
}

<div class="content">
  <p>
    Lorizzle ipsum tellivizzle sit amizzle, consectetizzle adipiscing elit. Nullam away things, shizznit stuff, suscipizzle shiz, gravida vizzle, funky fresh. Doggy phat tortizzle. Check it out its fo rizzle. Bizzle izzle shizzle my nizzle crocodizzle dapibus turpizzle tempizzle i'm in the shizzle. Mauris gizzle nibh et ghetto. Vestibulum ass phat. Pellentesque eleifend nizzle nisi. Fo shizzle my shizz shiznit fo shizzle dizzle. Donec dapibus. That's the shizzle uhuh ... yih! urna, pretium eu, mattizzle cool, shit things, nunc. Fizzle suscipizzle. Shizzlin dizzle semper daahng dawg boofron bow wow wow.



  </p>
  
  
</div>

Développer l'extrait

abe312
la source

0

<div style="width:1px;background-color:red;height:30px;float:right;"></div>

Peut facilement être fait en utilisant un div comme celui-ci

Choxmi
la source

-1

Il n'y a pas.

Pourquoi? Probablement parce qu'une table avec deux colonnes fera l'affaire.

OscarRyz
la source

23

Parce que les gens ne pensent pas que les tables devraient être utilisées pour cela (je n'ai pas voté contre).

erikkallen

-2

Non, il n'y en a pas. Et je vais vous raconter une petite histoire sur pourquoi ce n'est pas le cas. Mais d'abord, des solutions rapides:

a) Utilisez la classe CSS pour les éléments de base span/ div, par exemple ::

.vr{ 
   display: inline-block; 
   vertical-align: middle; 
   /* note that height must be precise, 100% does not work in some major browsers */
   height: 100px; 
   width: 1px; 
   background-color: #000;
}

Démonstration d'utilisation => https://jsfiddle.net/fe3tasa0/

b) Utilisez une bordure à un côté et éventuellement un :first-childsélecteur CSS si vous souhaitez appliquer des diviseurs généraux parmi les éléments frères / sœurs / voisins.

L'histoire de `<vr>` FITTING dans le paradigme original,
mais toujours pas là:

De nombreuses réponses suggèrent ici que le diviseur vertical ne correspond pas au paradigme / approche HTML d'origine ... c'est complètement faux. Les réponses se contredisent également beaucoup.

Ces mêmes personnes appellent probablement leur classe CSS clair « clearfix » - il n'y a rien à fixer au sujet flottant, vous êtes juste défricher ... Il y avait même un élément HTML3: <clear>. Malheureusement, cela et le dégagement du flottement sont l'une des rares idées fausses courantes.

En tous cas. «À l'époque», à «l'ère du HTML d'origine», on ne pensait pas à quelque chose comme inline-block, juste blocks,inlines et tables.

Le dernier est en fait la raison pour laquelle il <vr>n'existe pas.
À l'époque, on supposait que:
Si vous voulez diviser verticalement quelque chose et / ou créer plus de blocs de gauche à droite =>
=> vous créez / voulez créer des colonnes =>
=> cela implique que vous créez un tableau =>
= > les tableaux ont des bordures naturelles entre leurs cellules => aucune raison de faire un<vr>

Cette approche est en fait toujours valable, mais comme le temps l'a montré, la syntaxe faite pour les tables ne convient pas à tous les cas ainsi que ses styles par défaut.

Une autre hypothèse, probablement plus tardive, était que si vous ne créez pas de table, vous êtes probablement des éléments de bloc flottants . Cela signifie qu'ils collent ensemble , et encore une fois, vous pouvez définir une frontière , et ces jours-là, utilisez probablement même le :first-childsélecteur que j'ai suggéré ci-dessus ...

jave.web
la source

Existe-t-il une vr (règle verticale) en html?

Réponses:

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

1. javascript

2. css

3. instancier

usage

Vous ne voulez pas jouer avec javascript?

css

L'histoire de `<vr>` FITTING dans le paradigme original,
mais toujours pas là:

Existe-t-il une vr (règle verticale) en html?

Réponses:

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

1. javascript

2. css

3. instancier

usage

Vous ne voulez pas jouer avec javascript?

css

L'histoire de <vr> FITTING dans le paradigme original, mais toujours pas là:

L'histoire de `<vr>` FITTING dans le paradigme original,
mais toujours pas là: