Wie macht man mit HTML eine vertikale Linie?

Setzen Sie ein Mark <div>um das Markup, an dem die Linie als nächstes angezeigt werden soll, und verwenden Sie CSS, um sie zu formatieren:

.verticalLine {
  border-left: thick solid #ff0000;
}

<div class="verticalLine">
  some other content
</div>

Mit dem horizontalen Regel-Tag können Sie vertikale Linien erstellen.

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

Durch die Verwendung einer minimalen Breite und Größe wird die horizontale Regel zu einer vertikalen Regel.

Sie können ein Leerzeichen verwenden <div>, das genau so gestaltet ist, wie die Linie angezeigt werden soll:

HTML:

<div class="vertical-line"></div>

Mit exakter Höhe (überschreibender Stil in der Linie):

  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>

Gestalten Sie den Rand, wenn Sie einen 3D-Look wünschen:

    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>

Sie können natürlich auch mit erweiterten Kombinationen experimentieren:

  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>

Sie können auch eine vertikale Linie mit einer horizontalen HTML-Linie erstellen <hr />

html, body{height: 100%;}

hr.vertical {
  width: 0px;
  height: 100%;
  /* or height in PX */
}

<hr class="vertical" />

Es gibt kein vertikales Äquivalent zum <hr>Element. Ein Ansatz, den Sie möglicherweise ausprobieren möchten, besteht darin, einen einfachen Rand links oder rechts von dem zu verwenden, was Sie trennen:

#your_col {
  border-left: 1px solid black;
}

<div id="your_col">
  Your content here
</div>

Benutzerdefinierte HTML5- Elemente (oder reines CSS)

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.

Verwendungszweck

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

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.

Eine andere Möglichkeit besteht darin, ein 1-Pixel-Bild zu verwenden und die Höhe festzulegen. Mit dieser Option können Sie es an die gewünschte Stelle verschieben.

Nicht die eleganteste Lösung.

Sie können eine vertikale Linie zeichnen, indem Sie einfach Höhe / Breite mit einem beliebigen HTML-Element verwenden.

#verticle-line {
  width: 1px;
  min-height: 400px;
  background: red;
}

<div id="verticle-line"></div>

Es gibt kein Tag zum Erstellen einer vertikalen Linie in HTML.

1. Methode: Sie laden ein Linienbild. Dann setzen Sie seinen Stil wie"height: 100px ; width: 2px"

2. Methode: Sie können <td>Tags verwenden<td style="border-left: 1px solid red; padding: 5px;"> X </td>

Sie können das Tag hr (horizontale Linie) verwenden und es dann mit CSS unten um 90 Grad drehen

hr {   
    transform:rotate(90deg);
    -o-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
}

http://jsfiddle.net/haykaghabekyan/0c969bm6/1/

Ich habe eine Kombination des vorgeschlagenen "hr" -Codes verwendet. So sieht mein Code aus:

<hr style="width:0.5px; height:500px; position: absolute; left: 315px;"/>

Ich habe einfach den Wert des "linken" Pixelwerts geändert, um ihn zu positionieren. (Ich habe die vertikale Linie verwendet, um Inhalte auf meiner Webseite auszurichten, und habe sie dann entfernt.)

Um eine vertikale Linie zu erstellen, die in einem Div zentriert ist, können Sie diesen Code verwenden. Der 'Container' kann durchaus 100% breit sein, denke ich.

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">&nbsp;</div>
</div>

Warum nicht & # 124 verwenden, das das HTML-Sonderzeichen für | ist?

Wenn Sie vertikale Linien in einen Container einfügen möchten, um untergeordnete untergeordnete Elemente (Spaltenelemente) nebeneinander zu trennen, können Sie den Container folgendermaßen gestalten:

.container > *:not(:first-child) {
  border-left: solid gray 2px;
}

Dies fügt allen untergeordneten Elementen ab dem 2. untergeordneten Element einen linken Rand hinzu. Mit anderen Worten, Sie erhalten vertikale Grenzen zwischen benachbarten Kindern.

• >ist ein Kinderselektor. Es stimmt mit jedem untergeordneten Element der links angegebenen Elemente überein.
• *ist ein universeller Selektor. Es entspricht einem Element eines beliebigen Typs.
• :not(:first-child) bedeutet, dass es nicht das erste Kind seines Elternteils ist.

Browserunterstützung: > *: erstes Kind und : nicht ()

Ich denke, dies ist besser als eine einfache .child-except-first {border-left: ...}Regel, da es sinnvoller ist, die vertikalen Linien aus den Regeln des Containers zu stammen, nicht aus den Regeln der verschiedenen untergeordneten Elemente.

Ob dies besser ist als die Verwendung eines provisorischen vertikalen Regelelements (durch Stylen einer horizontalen Regel usw.), hängt von Ihrem Anwendungsfall ab. Dies ist jedoch zumindest eine Alternative.

Ein weiterer Ansatz ist möglich: Verwendung von SVG .

z.B :

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

Vorteile:

• Sie können Linien beliebiger Länge und Ausrichtung haben.
• Sie können die Breite und Farbe einfach angeben

Nachteile:

• SVG wird jetzt in den meisten modernen Browsern unterstützt. Einige alte Browser (wie IE 8 und älter) unterstützen dies jedoch nicht.

Vertikale Linie rechts zum 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>
  

Vertikale Linie links zum 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>
  

Um eine vertikale Linie hinzuzufügen, müssen Sie eine Stunde stylen.

Wenn Sie nun eine vertikale Linie erstellen, wird diese in der Mitte der Seite angezeigt:

<hr style="width:0.5px;height:500px;"/>

Um es jetzt zu platzieren, wo Sie wollen, können Sie diesen Code verwenden:

<hr style="width:0.5px;height:500px;margin-left:-500px;margin-right:500px;"/>

Dadurch wird es nach links positioniert. Sie können es umkehren, um es nach rechts zu positionieren.

Im vorherigen Element, nach dem Sie die vertikale Zeile anwenden möchten, können Sie CSS festlegen ...

border-right-width: thin;
border-right-color: black;
border-right-style: solid;

Um <hr>90 Grad drehen :

<hr style="width:100px; transform:rotate(90deg);">

Es gibt ein <hr>Tag für die horizontale Linie. Es kann mit CSS verwendet werden, um auch horizontale Linien zu erstellen:

.divider{
    margin-left: 5px;
    margin-right: 5px;
    height: 100px;
    width: 1px;
    background-color: red;
}

<hr class="divider">

Die Eigenschaft width bestimmt die Dicke der Linie. Die Eigenschaft height bestimmt die Länge der Linie. Die Eigenschaft Hintergrundfarbe bestimmt die Farbe der Linie.

Für einen Inline-Stil habe ich diesen Code verwendet:

<div style="border-left:1px black solid; position:absolute; left:50%; height:300px;" />

und das positionierte es direkt in der Mitte.

Ich brauchte eine vertikale Inline-Linie, also habe ich einen Knopf dazu gebracht, eine Linie zu werden.

<button type="button" class="v_line">l</button>

.v_line {
         width: 0px;
         padding: .5em .5px;
         background-color: black;
         margin: 0px; 4px;
        }

<div style="width:1px;background-color:#C0C0C0;"></div>

Das hat bei mir super funktioniert

Um die vertikale Linie in der Mitte zu zentrieren, verwenden Sie:

position: absolute; 
left: 50%;