HTML-CSS Dikey Çizgi Ekle

Web sayfanızda dikey bir çizgi oluşturmak için birkaç nedeniniz olabilir, ancak HTML'nin dikey çizgiler için herhangi bir öğesi yoktur. HTML'de yalnızca yatay bir çizgi için <hr> öğesi bulunmasına rağmen; html'de bir <vr>(vertical line) öğesi bulunmamaktadır ancak yine de HTML'de aşağıda belirtildiği gibi dikey bir çizgi oluşturmanın birden fazla yolu vardır:

• Border CSS Özelliğini Kullanma
• HTML'deki <hr> öğesini değiştirme

Sayfada bir Dikey çizgi çizmek için html'deki div etiketini kullanacağız. Dikey çizgi yapmak için, border-left veya border-right özelliğini kullanın. Div'in height özelliği ile birlikte, istenen uzunlukta bir dikey çizgi çizeceksiniz.

CSS:

.vr {
  border-left: 5px solid #e67e22;
  height: 300px;
}

HTML:

<div class="vr"></div>

ÇIKTI:

Sayfanızdaki dikey çizgiyi ortalamak için:

CSS:

.vr {
  border-left: 5px solid #e67e22;
  height: 500px;
  position: absolute;
  left: 50%;
  margin-left: -3px;
  top: 0;
}

HTML:

<div class="vr"></div>

ÇIKTI:

HTML'deki <hr> etiketini dikeyde çizmek için değiştirelim:

CSS:

hr{ 
  
    border:         none;
    border-left:    1px solid black;
    height:         100vh;
    width:          1px;       
}

HTML:

<hr>

ÇIKTI:

Metin arasına dikey çizgiler koymak istiyorsanız ve zaten yan yana float özelliği verilmiş bazı paragraflarınız varsa, bir border-right özelliği ile metni ayıran dikey çizgiler ekleyebilirsiniz.

CSS:

p {
       width: 200px;
       float: left;
       margin:10px;
       padding:10px;
       border-right: 1px solid red;
    }

HTML:

<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.</p>

<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.</p>

<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.</p>

ÇIKTI:

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.