горизонтальная линия и правильный способ кодирования в 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/>.

Если это не просто граница, которую вы хотите, вы можете использовать комбинацию отступов, границ и полей, чтобы получить желаемую границу.

— bevacqua
источник

8

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

— AJMaxwell,

В заголовке написана горизонтальная линия, а <hr /> - это так, поэтому я поднимаю это. Возможно, заголовок должен был читать стилизованную горизонтальную линию.

— Райан Бэйн,

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>

— Serv-вкл
источник

6

Мне нужна была длинная черточка, поэтому я использовал ее.

.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;
}

— FredG
источник

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>

Развернуть фрагмент

выделенный текст

— Брух
источник

Пожалуйста, добавьте комментарий, объясняющий ваш ответ.

— Barthy 06

0

Это относительно простой пример, и он сработал для меня.

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

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