горизонтальна лінія та правильний спосіб її кодування в html, css

122

Мені потрібно намалювати горизонтальну лінію після деякого блоку, і у мене є три способи це зробити:

1) Визначте клас h_lineта додайте до нього функції css, наприклад

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

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

2) Використовуйте hrтег

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

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

3) використовувати його як afterпсевдоклас

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

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

Який спосіб найбільш практичний?

html css

— Павел Тявін
джерело

2

Я думаю, що <hr>це найбільш семантично. Я маю на увазі, чи не для цього це призначено?

— j08691

3

чому б не використовувати border-bottom?

— jsweazy

3

У HTML5 елемент HTML <hr> являє собою тематичну перерву між елементами рівня абзацу (наприклад, зміна сцени в історії або зміщення теми з розділом).

— Скотт Сімпсон

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>

Розгорніть фрагмент

Ось як це робить html5boilerplate :

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

— moettinger
джерело

3

Примітка. Використовуйте, margin: 1em autoякщо ви хочете, щоб він завжди знаходився в центрі сторінки.

— Жак Марае

1

@JacquesMarais, не впевнений, що це необхідно, оскільки це блоковий елемент без визначеної ширини, щоб він все одно охоплював ширину всього контейнера.

— moettinger

65

Я б пішов на семантичну розмітку, використовую <hr/>.

Якщо ви не хочете лише межі, яку ви хочете, тоді ви можете використовувати комбінацію прокладки, облямівку та запас, щоб отримати бажану межу.

— бекваква
джерело

8

<hr>дійсний HTML5. Використовуване воно являє собою горизонтальне правило, але зараз воно визначається в семантичному виразі як тематична перерва між змістом. Більшість браузерів все одно відображатиме його як горизонтальну лінію, якщо не вказано інше. Джерело: developer.mozilla.org/en-US/docs/Web/HTML/Element/hr

— AJMaxwell

Назва говорить, що горизонтальна лінія, а <год /> це те, що я до цього. Заголовок, можливо, повинен був прочитати стилізований горизонтальний рядок.

— Райан Байне

11

У HTML5 <hr>тег визначає тематичну перерву. У HTML 4.01 <hr>тег являє собою горизонтальне правило.

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

Тож після визначення, я вважаю за краще <hr>

— bpoiss
джерело

10

Якщо ви дійсно хочете тематичну перерву , будь-яким чином використовуйте <hr>тег.

Якщо ви просто хочете проектну лінійку, ви можете використовувати щось на зразок класу css

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

і використовувати його як

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

— серв
джерело

5

Я хотів довгий тире, як лінія, тому я використав це.

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

}

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

Розгорніть фрагмент

— Алія
джерело

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>

Розгорніть фрагмент

— Надеем Касмі
джерело

Ви не відповіли на запитання "Що найпрактичніше?"

— Брайан Томпсетт - 汤莱恩

1

Моє просте рішення - стилі hr з css, щоб мати нульову верхню та нижню межі, нульову межу, висоту 1 пікселя та контрастний колір фону. Це можна зробити, встановивши стиль безпосередньо або визначивши клас, наприклад, наприклад:

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

— ФредГ
джерело

1

це залежить від вимоги, але багато пропозицій розробників - зробити ваш код максимально простим . тож, перейдіть з простим тегом "hr" та CSS-кодом для цього.

— Рам Прасад
джерело

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>

Розгорніть фрагмент

підкреслений текст

— bruh
джерело

Будь ласка, додайте коментар, що пояснює вашу відповідь.

— Барті

0

Це порівняно простий приклад і працював для мене.

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

Ресурс: https://www.w3docs.com/snippets/css/how-to-style-a-horizontal-line.html