水平線とhtml、cssでコーディングする正しい方法

122

あるブロックの後に水平線を描く必要があり、それを行うには3つの方法があります。

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 2013

3

なぜ使用しないのborder-bottomですか？

— jsweazy 2013

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 2016

65

セマンティックマークアップを使用するには、を使用し<hr/>ます。

それが単なる境界線でない限り、パディング、境界線、マージンの組み合わせを使用して、目的の境界を取得できます。

— ベバクア
ソース

8

<hr>有効なHTML5です。これは水平方向のルールを表すために使用されていましたが、現在はコンテンツ間の主題の区切りとして意味論的な用語で定義されています。ほとんどのブラウザは、特に指示がない限り、それを水平線として表示します。出典：developer.mozilla.org/en-US/docs/Web/HTML/Element/hr

— AJMaxwell 2016年

タイトルは横線と書いてありますが、<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-inc
ソース

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

私の簡単な解決策は、上部と下部のマージンがゼロ、ボーダーがゼロ、高さが1ピクセル、対照的な背景色になるようにcssでhrをスタイルすることです。これは、スタイルを直接設定するか、たとえば次のようにクラスを定義することで実行できます。

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

0

これは比較的単純な例であり、私にとってはうまくいきました。

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

リソース：https : //www.w3docs.com/snippets/css/how-to-style-a-horizontal-line.html