Gibt es eine Vr (vertikale Regel) in HTML?

Ich weiß, es ist ein hr (horizontal rule) in html, aber ich glaube nicht, dass es ein vr (vertikal-Regel). Bin ich da falsch und wenn nicht, warum gibt es nicht ein vertikales Lineal?

Kommentar zu dem Problem

Das ist eine tote Frage, aber mit der CSS3-Spezifikation nun, Sie könnte verwenden-transform:rotate(90deg), um eine vertikale, horizontale Regel. Kommentarautor: Jules

InformationsquelleAutor der Frage Xaisoft | 2009-02-21

html

120

Nein, es gibt keine vertikale Regel.

Es nicht machen logischen Sinn zu haben. HTML geparst wird sequenziell, das heißt, Sie legen Sie Ihren HTML-code von oben nach unten, von Links nach rechts, wie Sie es wollen, erscheinen von oben nach unten, von Links nach rechts (in der Regel)

Einen vr-tag folgt nicht, dass Paradigma.

Dies ist einfach zu tun mit CSS, jedoch. Ex:
```
<div style="border-left:1px solid #000;height:500px"></div>
```
Beachten Sie, dass die Angabe einer Höhe oder füllen Sie den Behälter mit Inhalt.

InformationsquelleAutor der Antwort Andy Baird
30

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

InformationsquelleAutor der Antwort matt
14

Als von anderen darauf hingewiesen, dass das Konzept einer vertikalen Regel nicht mit den ursprünglichen Ideen, die hinter der Struktur und der Präsentation von HTML-Dokumenten. Aber, in diesen Tagen (vor allem mit der Verbreitung von web-apps) gibt es eine kleine Anzahl von Szenarien, in denen dies wäre in der Tat nützlich sein.

Betrachten Sie beispielsweise eine horizontale navigation im Menü fest am oberen Rand des Bildschirms, ähnlich wie die Menü-bar in den meisten Fenster-GUI-Anwendungen. Sie haben mehrere top-level-Menüelemente angeordnet sind, von Links nach rechts, die, wenn geklickt haben, öffnen sich drop-down-Menüs. Vor Jahren war es üblich, zu erstellen, dies mit einer einzigen Zeile der Tabelle, aber das ist schlechtes HTML, und es ist allgemein anerkannt, dass der richtige Weg zu gehen, wäre eine Liste mit stark angepasste CSS.

Nun, sagen Sie, dass Sie möchten, um ähnliche Elemente zu gruppieren, aber fügen Sie eine vertikale Trennlinie zwischen den Gruppen, um etwas zu erreichen wie diese:
```
[Item 1a] [Item 1b] | [Item 2a] [Item 2b]
```
Mit <hr style="width: 1px; height: 100%; ..." /> funktioniert, aber kann als semantisch falsch, wie Sie sind, zu verändern, was dieses element eigentlich ist. Darüber hinaus können Sie nicht verwenden, diese innerhalb bestimmter Elemente, wo die HTML-DTD erlaubt nur inline-level-Elemente (z.B. innerhalb einer <span> element).

Eine bessere option wäre <span style="display: inline-block; width:1px; height:100%; background:#000; margin: 0 2px;"></span> jedoch nicht alle Browser unterstützen die display: inline-block; CSS-Eigenschaft, so dass die einzige wirkliche inline-level-option, um ein Bild verwenden, etwa so:

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

Dies hat den zusätzlichen Vorteil, dass Sie kompatibel mit nur-text-Browser (wie lynx), da das pipe-Zeichen wird angezeigt, anstatt das Bild. (Es immer noch nervt mich, dass M$IE falsch verwendet alt-text als tooltip an; das ist es, was das title-Attribut ist für!)

InformationsquelleAutor der Antwort megaflop

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

Probieren Sie es aus.

InformationsquelleAutor der Antwort Veniamin Ilmer

7

Wie etwa:
```
writing-mode:tb-rl
```
Wo oben->unten, rechts->Links?

Wir müssen senkrechte Regel.

InformationsquelleAutor der Antwort vscpp
5

Gibt es nicht, wo würde es gehen?

CSS verwenden, um einen Rahmen-Recht auf ein element, wenn Sie wollen, so etwas wie, dass.

InformationsquelleAutor der Antwort Chad Birch
2

HTML hat wenig bis gar keine vertikalen Positionierung aufgrund drucktechnischer Natur-Inhalt-layout. Vertikale Regel passt einfach nicht seiner Semantik.

InformationsquelleAutor der Antwort myroslav

Versuchen Sie es und Sie werden 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>

InformationsquelleAutor der Antwort muhammad rokonuzzaman

2

kann man in 2 Weg :
1. Stil erstellen Sie gab bereits in den div aber ändern, border-left, border-right
2. nehmen Sie ein Bild und seine Breite 1-2 px
InformationsquelleAutor der Antwort

Alte Frage, aber ich löste dieses mit display:flex; und es funktioniert Super:

<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 zudem keine Feste Höhe.

InformationsquelleAutor der Antwort Tero Heiskanen

1

Im Rahmen einer Liste Element, das verwendet wird, wie die navigation einer <vr /> - tag wäre perfekt nützlich. Der Grund, warum es nicht vorhanden ist, weil "Es nicht machen logischen Sinn haben" im Rahmen von HTML vor einem Jahrzehnt.

InformationsquelleAutor der Antwort joemaddalone
1

Für die Verwendung in HTML-E-Mails für die meisten desktop-clients, die Sie verwenden, Tabellen. In diesem Fall können Sie <hr> tag, mit den notwendigen (aber einfache) inline-styling, wie:
```
<hr width="1" size="50">
```
Natürlich das styling mit CSS flexibler, aber GMail und ähnliches nicht erlauben, mit der alle CSS-styling andere als inline...

InformationsquelleAutor der Antwort desko
1

Können Sie css-Code für die Simulation einer vertikalen Linie, und verwenden Sie die Klasse auf die div
```
.vhLine {
  border-left: thick solid #000000;
}
```
InformationsquelleAutor der Antwort Yaina Villafañes
1

Ich weiß, ich füge meine Antwort sehr spät, aber es würde sich lohnen, bin ich mir sicher. Sie können erreichen, vertikale Linie, die mit flex und hr

Siehe meine codepen hier.

InformationsquelleAutor der Antwort Umesh

Könnte Sie erstellen Sie eine benutzerdefinierte tag-als solche:

<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 eine Möglichkeit kennt, dass ich könnte, deaktivieren Sie diese in "open-ended" - tag, wie <hr> lassen Sie mich wissen, und ich werde es Bearbeiten)

InformationsquelleAutor der Antwort SReject

0

Gibt es nicht.

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

InformationsquelleAutor der Antwort OscarRyz
0

Gibt es keinen-tag in HTML, aber Sie können |.

InformationsquelleAutor der Antwort user3576467

Könnten Sie mit den neuen HTML5 -, SVG-tag:

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

InformationsquelleAutor der Antwort 1.21 gigawatts

0

Finde ich es einfach zu einem Bild einer Linie, und dann legen Sie es in den code als "Regel" festlegen der Breite und/oder Höhe, wie gebraucht. Diese wurden alle horizontal-Regel Bilder, aber es gibt nichts hindert mich (oder Sie) von der Verwendung eines "vertical-Regel" - Bild.

Dies ist cool für viele Gründe; Sie können verschiedene Linien, Farben oder Muster, die leicht als "Regeln", und da hätten Sie keine Texte, auch wenn Sie es getan hatte, der "normale" Weg über die hr in HTML, sollte es keine Auswirkungen SEO oder andere Sachen wie, dass. Und die image-Datei würde/sollte sehr klein (1 oder 2KB).

InformationsquelleAutor der Antwort Peter Jay
0

Zu viele übermäßig komplizierte Antworten. Stellen Sie einfach ein TableData-tag über wie viele Zeilen, die Sie wollen, dass es mit rowspan. Dann verwenden Sie den rechts-Grenze für die tatsächlichen bar.

Beispiel:
```
<td rowspan="5" style="border-right-color: #000000; border-right-width: thin; border-right-style: solid">&nbsp;</td>
<td rowspan="5">&nbsp;</td>
```
Sicherzustellen, dass die "&nbsp" in der zweiten Zeile führt die gleiche Menge an Zeilen wie die erste. so, dass es den richtigen Abstand zwischen den beiden.

Diese Technik diente mir ziemlich gut mit meiner Zeit in HTML5.

InformationsquelleAutor der Antwort Kevin Andrew Fogg

Ist heute möglich mit CSS3

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

InformationsquelleAutor der Antwort candlejack

0
```
<div style="width:1px;background-color:red;height:30px;float:right;"></div>
```
Leicht durchgeführt werden, indem ein div wie diese

InformationsquelleAutor der Antwort Choxmi
-2

Nein gibt es nicht. Und ich erzähle Ihnen eine kleine Geschichte, warum ist Sie es nicht. Aber zuerst,
schnelle Lösungen:

a) Benutzen Sie die CSS-Klasse für grundlegende Elemente span/div, z.B.: <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;
}
```
Demonstration der Nutzung => https://jsfiddle.net/fe3tasa0/

b) nutzen Sie die one-side-only-Grenze und eventuell CSS :first-child selector wenn Sie sich bewerben möchten eine Allgemeine Trennwänden u. Geschwister/Nachbar-Elemente.

Die Geschichte über <vr> PASSEND in der ursprünglichen Paradigma,
aber noch nicht da:

Viele Antworten hier suggerieren, dass der vertikale Teiler passt nicht auf die original-HTML-Paradigma/Ansatz ... das ist völlig falsch. Auch die Antworten widersprechen sich sehr.

Dieselben Leute sind wahrscheinlich ruft Ihre eindeutige CSS-Klasse "clearfix" - da gibt es nichts zu beheben, darüber schwebend, sind Sie gerade auf der Lichtung ... Es war sogar ein element in HTML3: <clear>. Traurig, diese Sicherheitsüberprüfung des floating ist eine der wenigen Fehleinschätzungen.

Sowieso. "Damals", in der "original-HTML-Alter", da gab es keinen Gedanken über so etwas wie inline-block gab es nur blocks, inlines und tables.

Der Letzte ist eigentlich der Grund, warum <vr> existiert nicht.

Damals wurde davon ausgegangen, dass:

Wenn Sie wollen verticaly teilen etwas und/oder mehr Blöcke von Links nach rechts =>

=> Sie machen/machen wollen, Spalten =>

=> das bedeutet, Sie erstellen eine Tabelle =>

=> Tabellen haben Natürliche Grenzen zwischen Ihren Zellen => kein Grund, um eine <vr>

Dieser Ansatz ist eigentlich immer noch gültig, aber wie die Zeit gezeigt hat, ist der syntax gemacht für Tabellen eignet sich nicht für jeden Fall so gut, wie es default-styles.

Eine weitere, vermutlich später, wurde angenommen, dass wenn Sie keine Tabelle erstellen, werden Sie wahrscheinlich floating-block-Elemente. Das heißt, Sie kleben zusammen, und wieder, Sie kann eine Grenze gesetzt, und an jenen Tagen wahrscheinlich sogar die :first-child selector, die ich oben vorgeschlagen...

InformationsquelleAutor der Antwort jave.web

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Die Geschichte über <vr> PASSEND in der ursprünglichen Paradigma,aber noch nicht da:

Die Geschichte über `<vr>` PASSEND in der ursprünglichen Paradigma,
aber noch nicht da: