HTML-CSS Dikey Çizgi Ekle - WebCebir

Trang chủ » Html Alt çizgi Kodu » HTML-CSS Dikey Çizgi Ekle - WebCebir

Có thể bạn quan tâm

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.

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

1527

Gönder

Từ khóa » Html Alt çizgi Kodu