yatay çizgi ve html, css ile kodlamanın doğru yolu

122

Bir bloktan sonra yatay bir çizgi çizmem gerekiyor ve bunu yapmanın üç yolu var:

1) Bir sınıf tanımlayın h_lineve buna css özellikleri ekleyin.

#css
.hline { width:100%; height:1px; background: #fff }

#html
<div class="block_1">Lorem</div> <div class="h_line"></div>

2) hrEtiket kullanın

#css
hr { width:100%; height:1px; background: #fff }

#html
<div class="block_1">Lorem</div> <hr />

3) aftersözde sınıf gibi kullanın

#css
.hline:after { width:100%; height:1px; background: #fff; content:"" }

#html
<div class="block_1 h_line">Lorem</div>

En pratik yol hangisidir?

html css

— Павел Тявин
kaynak

2

Bence <hr>en anlamsal olanı. Demek istediğim, anlamı bu değil mi?

— j08691

3

neden kullanmıyorsun border-bottom?

— jsweazy

3

HTML5'te HTML <hr> öğesi, paragraf düzeyindeki öğeler arasındaki tematik bir kopuşu temsil eder (örneğin, bir hikayedeki sahne değişikliği veya bir bölümle konu kayması).

— Scott Simpson

138

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

<div>Hello</div>
<hr/>
<div>World</div>

Snippet'i genişlet

Html5boilerplate bunu şu şekilde yapar:

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

— moettinger
kaynak

3

Not:margin: 1em auto Her zaman sayfanın ortasında olmasını istiyorsanız kullanın .

— Jacques Marais

1

@JacquesMarais, bunun gerekli olduğundan emin değilim, çünkü tanımlanmış genişliği olmayan bir blok elemanıdır, böylece yine de tüm kabın genişliğine yayılır.

— moettinger

65

Anlamsal işaretlemeye giderdim, bir <hr/>.

İstediğiniz sadece bir sınır olmadığı sürece, istediğiniz sınırı elde etmek için dolgu, kenarlık ve kenar boşluğunun bir kombinasyonunu kullanabilirsiniz.

— Bevacqua
kaynak

8

<hr>geçerli HTML5. Kullanılan yatay bir kuralı temsil eder, ancak artık anlamsal terimlerle içerik arasında tematik bir kopuş olarak tanımlanmaktadır. Çoğu tarayıcı, aksi belirtilmedikçe bunu yatay bir çizgi olarak göstermeye devam edecektir. Kaynak: developer.mozilla.org/en-US/docs/Web/HTML/Element/hr

— AJMaxwell

Başlık yatay çizgi diyor ve <hr /> öyle, bu yüzden bunu yükseltiyorum. Başlık belki de yatay bir çizgi şeklinde okunmalıydı.

— Ryan Bayne

11

HTML5'te <hr>etiketi, tematik bir sonu tanımlar. HTML 4.01'de <hr>etiket, yatay bir kuralı temsil eder.

http://www.w3schools.com/tags/tag_hr.asp

Tanımdan sonra tercih ederim <hr>

— bpoiss
kaynak

10

Gerçekten tematik bir mola istiyorsanız , elbette <hr>etiketini kullanın .

Sadece bir tasarım çizgisi istiyorsanız css sınıfı gibi bir şey kullanabilirsiniz.

.hline-bottom {
    padding-bottom: 10px;
    border-bottom: 2px solid #000; /* whichever color you prefer */
}

ve gibi kullan

<div class="block_1 hline-bottom">Cheese</div>

— serv-inc
kaynak

6

Çizgi gibi uzun bir çizgi istedim, bu yüzden bunu kullandım.

.dash{
        border: 1px solid red;
        width: 120px;
        height: 0px;

}

<div class="dash"></div>

Snippet'i genişlet

— Alia
kaynak

5

.line {
  width: 53px;
  height: 0;
  border: 1px solid #C4C4C4;
  margin: 3px;
  display:inline-block;
}

<html>
<body>
<div class="line"></div>
<div style="display:inline-block;">OR</div>
<div class="line"></div>
</body>
</html>

Snippet'i genişlet

— Nadeem Qasmi
kaynak

"En pratik olan hangisi?" Sorusunu yanıtlamadınız.

— Brian Tompsett - 汤莱恩

1

Basit çözümüm, hr'yi sıfır üst ve alt kenar boşlukları, sıfır kenarlık, 1 piksel yüksekliği ve zıt arka plan rengine sahip olacak şekilde css ile biçimlendirmektir. Bu, stili doğrudan ayarlayarak veya bir sınıf tanımlayarak yapılabilir, örneğin:

.thin_hr {
margin-top:0;
margin-bottom:0;
border:0;
height:1px;
background-color:black;
}

— FredG
kaynak

1

bu gereksinime bağlıdır, ancak birçok geliştiricinin önerisi kodunuzu olabildiğince basit hale getirmektir . bu nedenle, basit "hr" etiketi ve bunun için CSS kodu kullanın.

— Ram Prasad
kaynak

0

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

<div>Hello</div>
<hr/>
<div>World</div>

Snippet'i genişlet

vurgulanan metin

— bruh
kaynak

Lütfen cevabınızı açıklayan bir yorum ekleyin.

— Barthy

0

Bu nispeten basit bir örnek ve benim için çalıştı.

hr {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

Kaynak: https://www.w3docs.com/snippets/css/how-to-style-a-horizontal-line.html