Горизонтальная линия и правый способ закодировать ее в html, css

Мне нужно сделать горизонтальную линию после некоторого блока, и у меня есть три способа сделать это:

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>

Какой способ наиболее практичен?

Ответы

Ответ 1

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

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

Ответ 2

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

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

Ответ 3

В HTML5 тег <hr> определяет тематический разрыв. В HTML 4.01, Тег <hr> представляет собой горизонтальное правило.

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

Итак, после определения, я бы предпочел <hr>

Ответ 4

Если вам действительно нужен тематический разрыв, обязательно используйте тег <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

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

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

Ответ 6

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

Ответ 7

Я хотел длинную черту, как линию, поэтому я использовал это.

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

}

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

Ответ 8

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

Ответ 9

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

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