Y a-t-il une règle verticale dans html?

Je sais qu’il existe une règle horizontale en html, mais je ne pense pas qu’il existe une règle verticale. Ai-je tort et sinon, pourquoi n’y a-t-il pas de règle verticale?

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

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

Une balise vr ne suit pas ce paradigme.

Cela est facile à faire en utilisant CSS, cependant. Ex:

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

Vous pouvez créer une règle verticale comme ceci:


Comme d’autres l’ont fait remarquer, 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 effectivement utile.

Par exemple, considérons un menu de navigation horizontal fixé en haut de l’écran, similaire à la barre de menus de la plupart des applications d’interface graphique fenêtrées. Vous disposez de plusieurs éléments de menu de niveau supérieur disposés de gauche à droite qui, lorsque vous cliquez dessus, ouvrent des menus déroulants. Il y a des années, il était courant de créer ceci avec un tableau à une seule ligne, mais il s’agit d’un code HTML incorrect et il est largement reconnu que la bonne façon de procéder serait une liste de CSS fortement personnalisés.

Maintenant, disons que vous voulez 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] 

En utilisant


fonctionne, mais peut être considéré comme sémantiquement incorrect car vous modifiez le rôle de cet élément. De plus, vous ne pouvez pas l’utiliser dans certains éléments où la DTD HTML n’autorise que les éléments de niveau intégré (par exemple, dans un élément ).

Une meilleure option serait , cependant tous les navigateurs ne supportent pas l’ display: inline-block; Propriété CSS, la seule véritable option au niveau de l’inline est d’utiliser une image comme celle-ci:

|

Cela présente l’avantage supplémentaire d’être compatible avec les navigateurs textuels (comme lynx), car le caractère de canal est affiché à la place de l’image. (Cela m’agace toujours que M $ IE utilise incorrectement le texte alt comme une info-bulle; c’est à cela que sert l’atsortingbut title!)

  
Vertical Rule: →

Essaye le.

Que diriez-vous:

 writing-mode:tb-rl 

Où top-> bottom, right-> left?

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

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

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

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.

Essayez-le et vous vous connaîtrez:

  rokon
rkn
rockon
rocks

vous pouvez le faire de 2 manières:

  1. créer un style comme vous l’avez déjà donné en div, mais changer de bordure à gauche à droite
  2. prendre une image et faire sa largeur 1-2 px

Question ancienne mais j’ai résolu cela avec l’ display:flex; et ça marche super bien:

 
This is a div
This is another div

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

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

Essaye ça.

Vous pouvez définir la hauteur et la largeur sur ” div “, comme la scope de ” hr “.

La marge de ” hr ” est utilisée pour l’alignement.

 

Je sais que j’ajoute ma réponse très tard, mais cela en vaudra, j’en suis sûr. Vous pouvez réaliser une ligne verticale en utilisant flex et hr

Voir mon codepen ici .

Dans le contexte d’un élément de liste utilisé comme navigation, une balise 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 ya dix ans.

Pour une utilisation dans la messagerie HTML pour la plupart des clients de bureau, vous devez utiliser des tables. Dans ce cas, vous pouvez utiliser la


, avec le style en ligne nécessaire (mais simple), comme:

 

Bien sûr, le style avec CSS est plus flexible, mais GMail et similaire ne permettent d’utiliser aucun style CSS autre que celui en ligne …

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

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

Vous pouvez très facilement le faire en

 hr{ transform: rotate(90deg); } 
     

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

      this is text  more text   

(Si quelqu’un sait comment je pourrais transformer cela en une balise “ouverte”, comme


faites le moi savoir et je le modifierai)

Il n’y a pas.

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

Il n’y a pas de tag en HTML, mais vous pouvez utiliser |.

Vous pouvez utiliser le nouveau tag HTML5 SVG:

     

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 vos besoins. Celles-ci ont toutes été des images de règles horizontales, mais rien ne m’empêche (ou vous) d’utiliser une image de “règle verticale”.

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

Trop de réponses trop compliquées. Créez simplement une balise TableData couvrant le nombre de lignes que vous souhaitez utiliser avec rowspan. Utilisez ensuite la bordure droite pour la barre réelle.

Exemple:

     

Assurez-vous que le “& nbsp” dans la deuxième ligne exécute le même nombre de lignes que le premier. afin qu’il y ait un espacement correct entre les deux.

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

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

Pour les personnes qui tentent de créer des colonnes pour du 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; } 
 

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.

 

Facilement peut être fait en utilisant un div comme celui-ci

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

entrer la description de l'image ici

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

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

* Vous pourriez avoir besoin de manipuler un peu display:inline-block|inline car inline ne développera pas 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:  

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

usage

  

THISWORKS

entrer la description de l'image ici

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


Vous ne voulez pas gâcher avec le 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 .

Non, il n’y en a pas. Et je vais vous raconter une petite histoire sur pourquoi. 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 seul côté et éventuellement un sélecteur CSS :first-child si vous souhaitez appliquer un séparateur général entre les éléments frères / voisins.

L’histoire de FITTING dans le paradigme original,
mais toujours pas là:

Beaucoup de réponses suggèrent ici que le diviseur vertical ne correspond pas au paradigme / à l’approche HTML original … qui est complètement faux. Les réponses se contredisent aussi beaucoup.

Ces mêmes personnes appellent probablement leur classe CSS claire “clearfix” – il n’y a rien à corriger en flottant, vous effacez tout simplement … Il y avait même un élément dans HTML3: . Malheureusement, cette disparition de la flottaison est l’une des rares idées fausses communes.

En tous cas. “A l’époque”, dans les “âges HTML d’origine”, on ne pensait pas à quelque chose comme ” inline-block , il n’y avait que des blocks , des inlines et des inlines .

Le dernier est en fait la raison pour laquelle n’existe pas.
À l’époque, on supposait que:
Si vous souhaitez 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 une table =>
=> les tables ont des frontières naturelles entre leurs cellules => aucune raison de faire un

Cette approche est en fait toujours valide, mais comme le montre le temps, la syntaxe faite pour les tables ne convient pas à tous les cas, ni à ses styles par défaut.


Une autre hypothèse, probablement plus tard, était que si vous ne créez pas de table, vous êtes probablement des éléments de bloc flottant . Cela signifie qu’ils sont ensemble , et encore une fois, vous pouvez définir une frontière , et ces jours utilisent probablement même le :first-child sélecteur :first-child j’ai suggéré ci-dessus …