Gibt es eine vr (vertikale Regel) in HTML?

133

Ich weiß, dass es in HTML eine Stunde (horizontale Regel) gibt, aber ich glaube nicht, dass es eine vr (vertikale Regel) gibt. Liege ich falsch und wenn nicht, warum gibt es keine vertikale Regel?

html 
— Xaisoft
quelle
17
Dies ist eine tote Frage, aber mit der jetzt veröffentlichten CSS3-Spezifikation können Sie transform: rotate (90 Grad) verwenden, um eine vertikale, horizontale Regel zu erstellen.
— Jules
3
Wenn Sie Flexbox als Zeilen verwenden (Anzeige: Flex; Flex-Richtung: Zeile;), werden hrElemente automatisch vertikal. Sie müssen nur die heightEigenschaft festlegen (z. B. Höhe: 80%;).
— Rodrigo

Antworten:

156

Nein, es gibt keine vertikale Regel.

Es macht keinen logischen Sinn, einen zu haben. HTML wird nacheinander analysiert, dh Sie legen Ihren HTML-Code von oben nach unten, von links nach rechts so an, wie er von oben nach unten, von links nach rechts (im Allgemeinen) angezeigt werden soll.

Ein vr-Tag folgt diesem Paradigma nicht.

Dies ist jedoch mit CSS einfach zu bewerkstelligen. Ex:

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

Beachten Sie, dass Sie eine Höhe angeben oder den Container mit Inhalt füllen müssen.

— Andy Baird
quelle
4
Tabellen können Elemente vertikal trennen. Was Sie also sagen, ist nicht der wahre Grund, warum es kein vr-Tag gibt.
— CiscoIPPhone
6
Aus diesem Grund wurden der HTML-Spezifikation keine Tabellen hinzugefügt. Tabellen dienen zur Anzeige tabellarischer Daten. Fast jedes HTML-Element kann verwendet werden, um Elemente vertikal zu trennen (alles, was Sie für die Anzeige festlegen: Block und Float: Links mit einer beliebigen Höhe)
— Andy Baird
19
erf. Ich habe versucht zu sagen, dass wenn Dinge bereits vertikal getrennt werden können, wie würde das Hinzufügen eines VR nicht dem HTML-Paradigma folgen?
— CiscoIPPhone
4
@CiscoIPPhone - Für die vertikale Trennung ist eine horizontale Regel erforderlich. Eine seitliche Trennung würde eine vertikale Regel erfordern. Ergo, Andy Baird hat recht, denke ich.
— Joshua
3
Ich kann nicht zustimmen, dass es nicht dem Paradigma folgt. Wie Sie sagten, wird es nacheinander von oben nach unten und von links nach rechts analysiert. Sie können Inhalte, die von links nach rechts verlaufen, mit einer vertikalen Regel teilen. In früheren Tagen von HTML stimme ich zu, dass es keinen logischen Sinn ergeben hätte. Jetzt wird eine vertikale Regel in HTML häufig verwendet, obwohl es kein semantisch korrektes Tag dafür gibt. Nur meine zwei Cent.
— Hendeca
37

Sie können eine vertikale Regel wie folgt erstellen: <hr style="width: 1px; height: 20px; display: inline-block;">

— matt
quelle
16

Wie von anderen betont, passt das Konzept einer vertikalen Regel nicht zu den ursprünglichen Ideen für die Struktur und Präsentation von HTML-Dokumenten. Heutzutage (insbesondere mit der Verbreitung von Web-Apps) gibt es jedoch eine kleine Anzahl von Szenarien, in denen dies tatsächlich nützlich wäre.

Stellen Sie sich beispielsweise ein horizontales Navigationsmenü vor, das oben auf dem Bildschirm angezeigt wird, ähnlich der Menüleiste in den meisten GUI-Anwendungen mit Fenstern. Sie haben mehrere Menüelemente der obersten Ebene, die von links nach rechts angeordnet sind und beim Klicken Dropdown-Menüs öffnen. Vor Jahren war es üblich, dies mit einer einzeiligen Tabelle zu erstellen, aber dies ist schlechtes HTML, und es ist allgemein anerkannt, dass der richtige Weg eine Liste mit stark angepasstem CSS wäre.

Angenommen, Sie möchten ähnliche Elemente gruppieren, aber zwischen den Gruppen ein vertikales Trennzeichen hinzufügen, um Folgendes zu erreichen:

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

Die Verwendung von <hr style="width: 1px; height: 100%; ..." />Werken kann jedoch als semantisch falsch angesehen werden, wenn Sie ändern, wofür dieses Element tatsächlich bestimmt ist. Darüber hinaus können Sie dies nicht in bestimmten Elementen verwenden, in denen die HTML-DTD nur Elemente auf Inline-Ebene zulässt (z. B. innerhalb eines <span>Elements).

Eine bessere Option wäre <span style="display: inline-block; width:1px; height:100%; background:#000; margin: 0 2px;"></span>, jedoch unterstützen nicht alle Browser die display: inline-block;CSS-Eigenschaft. Die einzige echte Option auf Inline-Ebene besteht darin, ein Bild wie das folgende zu verwenden:

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

Dies hat den zusätzlichen Vorteil, dass es mit Nur-Text-Browsern (wie Luchs) kompatibel ist, da das Pipe-Zeichen anstelle des Bildes angezeigt wird. (Es ärgert mich immer noch, dass M $ IE Alt-Text fälschlicherweise als Tooltip verwendet; dafür ist das title-Attribut gedacht!)

— Daiscog
quelle
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>

Versuch es.

— Veniamin Ilmer
quelle
7

Wie wäre es mit:

writing-mode:tb-rl

Wo oben-> unten, rechts-> links?

Dafür brauchen wir vertikale Regeln.

— vscpp
quelle
Das ist ein guter Punkt. Dies bedeutet jedoch, dass die Seite auf unkonventionelle Weise gerendert wird, da Sie mit allen anderen Elementen im Dom konkurrieren müssen. Haben Sie jemals bemerkt, dass es manchmal Renderunterschiede zwischen den Browsern gibt? ;) ~ Trotzdem sehr guter Punkt .
— Jcolebrand
7

Ein <hr> in einem Display: flex bewirkt, dass es vertikal angezeigt wird.

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

Beispiel:

<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
quelle
3

Es gibt keine, wohin würde es gehen?

Verwenden Sie CSS, um ein Element mit einem Rahmen rechts zu versehen, wenn Sie so etwas möchten.

— Chad Birch
quelle
2

HTML hat aufgrund des typografischen Charakters des Inhaltslayouts nur eine geringe bis keine vertikale Positionierung. Die vertikale Regel passt einfach nicht zu ihrer Semantik.

— myroslav
quelle
2

Probieren Sie es aus und Sie werden es selbst wissen:

<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
quelle
2

Sie können auf zwei Arten tun:

  1. Erstellen Sie einen Stil, wie Sie ihn bereits in div angegeben haben, ändern Sie jedoch den Rahmen von links nach rechts
  2. Nimm ein Bild und mache seine Breite 1-2 px
— BoltClock
quelle
2

Alte Frage, aber ich habe das gelöst display:flex;und es funktioniert großartig:

<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/

Diese Lösung erfordert auch keine feste Höhe.

— Tero Heiskanen
quelle
Lösung der Zukunft, aber wahrscheinlich erst 2017-18 + :)
— jave.web
2

Versuche dies.

Sie können Höhe und Breite auf " div " einstellen , wie der Bereich für " hr ".

Der Rand von " h " wird zur Ausrichtung verwendet.

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

— Chung-Ming Wu
quelle
2

Ich weiß, dass ich meine Antwort sehr spät hinzufüge, aber es wäre es wert, da bin ich mir sicher. Sie können eine vertikale Linie mit erreichenflex und erreichenhr

Siehe meinen Codepen hier .

— Umesh
quelle
2
Besser spät als nie!
— Jry9972
1

Im Zusammenhang mit einem Listenelement, das als Navigation verwendet wird, wäre ein <vr /> -Tag sehr nützlich. Der Grund, warum es nicht existiert, ist, dass "Es ist nicht logisch, einen zu haben" im Kontext von HTML vor einem Jahrzehnt.

— Joemaddalone
quelle
1

Für die Verwendung in HTML-E-Mails für die meisten Desktop-Clients müssen Sie Tabellen verwenden. In diesem Fall können Sie ein <hr>Tag mit dem erforderlichen (aber einfachen) Inline-Stil verwenden, z.

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

Natürlich ist das Styling mit CSS flexibler, aber GMail und ähnliches erlauben keine andere Verwendung von CSS-Styling als Inline ...

— Desko
quelle
1

Sie können CSS verwenden, um eine vertikale Linie zu simulieren, und die Klasse für das Div verwenden

.vhLine {
  border-left: thick solid #000000;
}
— Yaina Villafañes
quelle
1

Sie können dies sehr einfach tun, indem Sie 

hr{
 transform: rotate(90deg);
}
<html>
<head>
</head>
<body>
<hr>
</body> 
</html>
Erweitern Sie das Snippet
Achten Sie auf die Höhe und Breite der Stunde

— Nitish
quelle
1

Benutzerdefinierte HTML5- Elemente (oder reines CSS)

Geben Sie hier die Bildbeschreibung ein

1. Javascript

Registrieren Sie Ihr Element.

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

* Das -ist in allen benutzerdefinierten Elementen obligatorisch.

2. CSS

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

* Möglicherweise müssen Sie ein wenig herumspielen, display:inline-block|inlineda inlinees nicht auf die Höhe des Elements erweitert wird. Verwenden Sie den Rand, um die Linie innerhalb eines Containers zu zentrieren.

3. instanziieren

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

* Leider können Sie keine benutzerdefinierten selbstschließenden Tags erstellen.

Verwendung

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

Geben Sie hier die Bildbeschreibung ein

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

Sie möchten sich nicht mit Javascript anlegen?

Wenden Sie diese CSS-Klasse einfach auf Ihr bestimmtes Element an.

CSS

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

* Siehe Anmerkungen oben.

Link zur ursprünglichen Antwort auf SO .

— Qwerty
quelle
0

Sie können ein benutzerdefiniertes Tag als solches erstellen:

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

(Wenn jemand weiß, wie ich daraus ein "offenes" Tag machen kann, <hr>lass es mich wissen und ich werde es bearbeiten.)

— SReject
quelle
Sie könnten es kurz markieren<vr />
— jave.web
0

Sie können das neue HTML5-SVG-Tag verwenden: 

<svg style="position:absolute;width:100%;height:100%;">
    <line id="myVerticalLine" y1="0" y2="100" x1="0" x2="0">
    </line>
</svg>
— 1,21 Gigawatt
quelle
0

Ich finde es einfach, ein Bild einer Linie zu erstellen und es dann als "Regel" in den Code einzufügen und die Breite und / oder Höhe nach Bedarf einzustellen. Dies waren alles Bilder mit horizontalen Regeln, aber nichts hindert mich (oder Sie) daran, ein Bild mit "vertikalen Regeln" zu verwenden.

Das ist aus vielen Gründen cool; Sie können verschiedene Linien, Farben oder Muster leicht als "Regeln" verwenden, und da sie keinen Text enthalten würden, sollte dies keine Auswirkungen auf SEO oder andere Dinge haben, selbst wenn Sie es "normal" mit hr in HTML gemacht hätten Das. Und die Bilddatei wäre / sollte sehr klein sein (höchstens 1 oder 2 KB).

— Peter Jay
quelle
Sie sollten Beispielcode hinzufügen, um die von Ihnen vorgeschlagene Technik zu demonstrieren.
— Adam Katz
0

Zu viele zu komplizierte Antworten. Erstellen Sie einfach ein TableData-Tag, das sich über die Anzahl der Zeilen erstreckt, die mit Rowspan verwendet werden sollen. Verwenden Sie dann den rechten Rand für den eigentlichen Balken.

Beispiel:

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

Stellen Sie sicher, dass das "& nbsp" in der zweiten Zeile dieselbe Anzahl von Zeilen enthält wie die erste. so dass zwischen beiden der richtige Abstand besteht.

Diese Technik hat mir mit meiner Zeit in HTML5 ziemlich gute Dienste geleistet.

— Kevin Andrew Fogg
quelle
0

Heute ist möglich mit CSS3

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

Für Leute, die versuchen, Spalten für Text zu erstellen, gibt es eine Spaltenregeleigenschaft, die Sie in Betracht ziehen sollten!

.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>
Erweitern Sie das Snippet

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

Mit einem Div wie diesem ist das ganz einfach möglich

— Choxmi
quelle
-1

Da ist nicht.

Warum? Wahrscheinlich, weil eine Tabelle mit zwei Spalten ausreicht.

— OscarRyz
quelle
23
Weil die Leute nicht denken, dass Tabellen dafür verwendet werden sollten (ich habe nicht abgelehnt).
— Erikkallen
-2

Nein, da ist kein. Und ich werde Ihnen eine kleine Geschichte darüber erzählen, warum es nicht so ist. Aber zuerst schnelle Lösungen:

a) Verwenden Sie CSS - Klasse für Grundelemente span/ div, zum Beispiel: <span class="vr"></span>:

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

Verwendungsnachweis => https://jsfiddle.net/fe3tasa0/

b) Verwenden Sie einen einseitigen Rand und möglicherweise einen CSS- :first-childSelektor, wenn Sie allgemeine Trennlinien zwischen Geschwister- / Nachbarelementen anwenden möchten.

Die Geschichte über <vr> FITTING im ursprünglichen Paradigma,
aber immer noch nicht da:

Viele Antworten hier legen nahe, dass der vertikale Teiler nicht zum ursprünglichen HTML-Paradigma / -Ansatz passt ... das ist völlig falsch. Auch die Antworten widersprechen sich sehr.

Dieselben Leute nennen ihre klare CSS-Klasse wahrscheinlich "clearfix" - es gibt nichts zu korrigieren, wenn Sie schweben, Sie löschen es nur ... Es gab sogar ein Element in HTML3 : <clear>. Leider ist dies und die Freigabe des Schwimmens eines der wenigen verbreiteten Missverständnisse.

Wie auch immer. „Damals“ in dem „ursprünglichen HTML - Zeitalter“, gab es keine Gedanken über so etwas wie inline-block, gibt es nur blocks, inlinesund tables.

Der letzte ist eigentlich der Grund, warum es <vr>ihn nicht gibt.
Damals wurde angenommen, dass:
Wenn Sie etwas vertikal teilen und / oder mehr Blöcke von links nach rechts
machen möchten => => Sie machen / wollen Spalten =>
=>, was bedeutet, dass Sie eine Tabelle erstellen =>
= > Tabellen haben natürliche Grenzen zwischen ihren Zellen => kein Grund, a<vr>

Dieser Ansatz ist tatsächlich noch gültig, aber wie die Zeit gezeigt hat, ist die für Tabellen erstellte Syntax nicht für jeden Fall geeignet, ebenso wie für die Standardstile.

Eine andere, wahrscheinlich spätere Annahme war, dass Sie wahrscheinlich schwebende Blockelemente sind , wenn Sie keine Tabelle erstellen . Das heißt, sie halten zusammen , und Sie können wieder einen Rand setzen , und in diesen Tagen verwenden Sie wahrscheinlich sogar den :first-childoben vorgeschlagenen Selektor ...

— jave.web
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.