Jak utworzyć linię pionową za pomocą HTML?

Umieść <div>znacznik wokół miejsca, w którym ma się pojawić linia, i użyj stylów CSS:

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

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

Za pomocą znacznika reguły poziomej można tworzyć pionowe linie.

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

Dzięki zastosowaniu minimalnej szerokości i dużego rozmiaru reguła pozioma staje się pionową.

Możesz użyć pustego <div>stylu, który jest dokładnie taki, jak chcesz, aby pojawiała się linia:

HTML:

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

Z dokładną wysokością (nadrzędny styl w linii):

  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>

Nadaj styl ramce, jeśli chcesz wyglądać 3D:

    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>

Możesz oczywiście także eksperymentować z zaawansowanymi kombinacjami:

  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>

Możesz także utworzyć linię pionową za pomocą poziomej linii HTML <hr />

html, body{height: 100%;}

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

<hr class="vertical" />

Nie ma pionowego odpowiednika <hr>elementu. Jednak jednym z podejść, które możesz wypróbować, jest użycie prostej ramki po lewej lub prawej stronie tego, co oddzielasz:

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

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

Elementy niestandardowe HTML5 (lub czysty CSS)

1. javascript

Zarejestruj swój element.

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

* -Jest obowiązkowy we wszystkich niestandardowych elementach.

2. css

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

* Być może będziesz musiał trochę pogrzebać, display:inline-block|inlineponieważ inlinenie rozwija się do wysokości elementu. Użyj marginesu, aby wyśrodkować linię w kontenerze.

3. utworzyć wystąpienie

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

* Niestety nie można tworzyć niestandardowych tagów samozamykających.

stosowanie

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

przykład: http://html5.qry.me/vertical-rule

Nie chcesz zadzierać z javascript?

Po prostu zastosuj tę klasę CSS do wyznaczonego elementu.

css

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

* Patrz uwagi powyżej.

Inną opcją jest użycie obrazu 1-pikselowego i ustawienie wysokości - ta opcja pozwoli Ci przenieść go tam, gdzie chcesz.

Nie jest to jednak najbardziej eleganckie rozwiązanie.

Możesz narysować linię pionową, po prostu używając wysokości / szerokości z dowolnym elementem HTML.

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

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

Nie ma żadnego znacznika do utworzenia pionowej linii w HTML.

1. Metoda: ładujesz obraz linii. Następnie ustaw swój styl"height: 100px ; width: 2px"

2. Metoda: Możesz użyć <td>tagów<td style="border-left: 1px solid red; padding: 5px;"> X </td>

Możesz użyć znacznika hr (pozioma linia), a następnie obrócić go o 90 stopni za pomocą css poniżej

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

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

Użyłem kombinacji sugerowanego kodu „hr” i oto, jak wygląda mój kod:

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

Po prostu zmieniłem wartość „lewego” piksela, aby go ustawić. (Użyłem pionowej linii do uszeregowania treści na mojej stronie, a następnie ją usunąłem).

Aby utworzyć pionową linię wyśrodkowaną w div, myślę, że możesz użyć tego kodu. „Pojemnik” może mieć chyba 100% szerokości.

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>

Dlaczego nie użyć & # 124, który jest znakiem specjalnym HTML dla |

Jeśli Twoim celem jest umieszczenie pionowych linii w kontenerze w celu oddzielenia obok siebie elementów potomnych (elementów kolumny), możesz rozważyć stylizację kontenera w następujący sposób:

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

Dodaje to lewą ramkę do wszystkich elementów potomnych, począwszy od drugiego dziecka. Innymi słowy, otrzymujesz pionowe granice między sąsiadującymi dziećmi.

• >jest selektorem dzieci. Pasuje do dowolnego elementu podrzędnego elementu określonego po lewej stronie.
• *jest uniwersalnym selektorem. Pasuje do elementu dowolnego typu.
• :not(:first-child) oznacza, że ​​nie jest to pierwsze dziecko jego rodzica.

Obsługa przeglądarki: > *: first-child i : not ()

Myślę, że to lepsze niż proste .child-except-first {border-left: ...} reguła, ponieważ bardziej sensowne jest, aby pionowe linie pochodziły z reguł kontenera, a nie reguł różnych elementów potomnych.

To, czy jest to lepsze niż użycie prowizorycznego elementu reguły pionowej (poprzez stylowanie reguły poziomej itp.), Będzie zależeć od twojego przypadku użycia, ale jest to przynajmniej alternatywa.

Możliwe jest jeszcze jedno podejście: użycie SVG .

np .:

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

Plusy:

• Możesz mieć linię o dowolnej długości i orientacji.
• Możesz łatwo określić szerokość i kolor

Cons :

• Pliki SVG są teraz obsługiwane w większości nowoczesnych przeglądarek. Ale niektóre stare przeglądarki (np. IE 8 i starsze) nie obsługują tego.

Linia pionowa bezpośrednio do 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>
  

Linia pionowa w lewo do 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>
  

Aby dodać linię pionową, musisz stylizować godz.

Teraz, gdy utworzysz linię pionową, pojawi się ona na środku strony:

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

Teraz, aby umieścić go tam, gdzie chcesz, możesz użyć tego kodu:

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

Spowoduje to ustawienie go w lewo, możesz go odwrócić, aby ustawić go w prawo.

Jest <hr>znacznik dla linii poziomej. Można go używać z CSS do tworzenia linii poziomej również:

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

<hr class="divider">

Właściwość width określa grubość linii. Właściwość height określa długość linii. Właściwość kolor tła określa kolor linii.

W poprzednim elemencie, po którym chcesz zastosować wiersz pionowy, możesz ustawić CSS ...

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

Obróć o <hr>90 stopni:

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

Dla stylu wbudowanego użyłem tego kodu:

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

i to umieściło go bezpośrednio w centrum.

Potrzebowałem liniowej linii pionowej, więc oszukałem przycisk, aby stać się linią.

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

To zadziałało dla mnie świetnie

Aby ustawić linię pionową na środku w środku, użyj:

position: absolute; 
left: 50%;