it-swarm.com.de

Wie erstelle ich eine vertikale Linie in HTML?

Wie macht man mit HTML eine vertikale Linie?

316
Gopal

Platzieren Sie einen <div> um das Markup, in dem die Linie als nächstes erscheinen soll, und verwenden Sie CSS, um sie zu formatieren:

.verticalLine {
  border-left: thick solid #ff0000;
}
<div class="verticalLine">
  some other content
</div>
520

Mit dem Tag für horizontale Regeln können Sie vertikale Linien erstellen.

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

Durch die Verwendung von minimaler Breite und großer Größe wird die horizontale Linie zur vertikalen Linie.

228
Anthony

Sie können einen leeren <div> verwenden, der genau so gestaltet ist, wie die Linie angezeigt werden soll:

HTML:

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

Mit exakter Höhe (übergeordneter 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>

Natürlich können Sie 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>
67
awe

Sie können auch eine vertikale Linie erstellen, indem Sie die horizontale HTML-Linie <hr /> verwenden.

html, body{height: 100%;}

hr.vertical {
  width: 0px;
  height: 100%;
  /* or height in PX */
}
<hr class="vertical" />
30
Ishan Jain

Es gibt kein vertikales Äquivalent zum <hr> -Element. Möglicherweise möchten Sie jedoch versuchen, einen einfachen Rahmen links oder rechts von dem zu trennenden Element zu verwenden:

_#your_col {
  border-left: 1px solid black;
}_
_<div id="your_col">
  Your content here
</div>_
20
Daniel Vassallo

HTML5 benutzerdefinierte Elemente (oder reines CSS)

enter image description here

1. Javascript

Registrieren Sie Ihr Element.

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

* Der - 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 mit display:inline-block|inline herumspielen, da inline nicht auf die Höhe des Elements erweitert werden kann. 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>

enter image description here

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


Du willst dich 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.

15
Qwerty

Eine andere Option ist, 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.

9
chris

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

  1. Methode: Sie laden ein Linienbild. Dann setzt du seinen Style wie "height: 100px ; width: 2px"

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

5
onurbaysan

Ich habe eine Kombination des vorgeschlagenen "hr" -Codes verwendet, und 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.)

4
Guy

Ich denke, Sie können diesen Code verwenden, um eine vertikale Linie zu erstellen, die in einem div zentriert ist. 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>
4
Edd

Sie können eine vertikale Linie zeichnen, indem Sie einfach Höhe/Breite für jedes HTML-Element verwenden.

#verticle-line {
  width: 1px;
  min-height: 400px;
  background: red;
}
<div id="verticle-line"></div>
4
Aamir Shahzad

Sie können das Tag hr (horizontale Linie) verwenden und anschließend mit CSS 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/

4
Hayk Aghabekyan

Verwenden Sie & # 124, das HTML-Sonderzeichen für |

3

Ein weiterer Ansatz ist möglich: Verwenden 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 eine Linie beliebiger Länge und Ausrichtung haben.
  • Sie können die Breite, Farbe leicht angeben

Nachteile:

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

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

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

Dadurch werden alle untergeordneten Elemente ab dem zweiten untergeordneten Element mit einem linken Rand versehen. Mit anderen Worten, Sie erhalten vertikale Grenzen zwischen benachbarten Kindern.

  • > ist eine untergeordnete Auswahl. Es stimmt mit jedem untergeordneten Element des (der) links angegebenen Elements (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.

Browser-Unterstützung: > *: erstes Kind und : nicht ()

Ich denke, dies ist besser als eine einfache .child-except-first {border-left: ...} -Regel, da es sinnvoller ist, wenn die vertikalen Linien von den Regeln des Containers stammen, nicht von 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.

3
S. Kirby

Vertikale Linie rechts vom 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 vom 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>
  
3
Pranav V R

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

Nun können Sie diesen Code verwenden, um es an die gewünschte Stelle zu bringen:

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

Dadurch wird es links positioniert. Sie können es umkehren, um es 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;
1
Abhishek Mathur

Drehe einen <hr> um 90 Grad:

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

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.

0
James Drinkard