web-dev-qa-db-ja.com

水平改行用のHTML5タグ

<hr>タグを使用して改行を挿入することに関する投稿を既に見つけましたが、w3 Webサイトでタグを検索したとき（ http://www.w3schools.com/tags/tag_hr .asp ）これは、タグのすべての属性がHTML5でサポートされていないことを示しています。明らかに、自分のWebサイトをHTML5互換にしたいので、目に見える水平線を挿入する最良の方法は何でしょうか？

ありがとう

htmlcsshtml5line-breaks
15
Willman

それでも<hr>を水平線として使用できますが、おそらくそうする必要があります。 HTML5では、コンテンツの表示方法について一切約束することなく、コンテンツのテーマ別の区切りを定義します。 HTML5仕様でサポートされていない属性はすべて、タグの外観に関連しています。外観は、HTML自体ではなく、CSSで設定する必要があります。

したがって、属性なしで<hr>タグを使用し、CSSでスタイルを設定して、希望どおりに表示します。

27
Thaum Rystra

[〜＃〜] html [〜＃〜]ファイルでhrタグを使用し、[〜＃〜] css [〜＃〜 ] file。

    hr {
       display: block;
       position: relative;
       padding: 0;
       margin: 8px auto;
       height: 0;
       width: 100%;
       max-height: 0;
       font-size: 1px;
       line-height: 0;
       clear: both;
       border: none;
       border-top: 1px solid #aaaaaa;
       border-bottom: 1px solid #ffffff;
    }

それは完全に動作します。

14
shuboy2014

<hr>タグと同じ属性を持つdivを作成できます。これにより、完全にカスタマイズできます。以下にサンプルコードを示します。

HTML：

<h3>This is a header.</h3>
<div class="customHr">.</div>

<p>Here is some sample paragraph text.<br>
This demonstrates what could go below a custom hr.</p>

CSS：

.customHr {
    width: 95%
    font-size: 1px;
    color: rgba(0, 0, 0, 0);
    line-height: 1px;

    background-color: grey;
    margin-top: -6px;
    margin-bottom: 10px;
}

プロジェクトの結果を確認するために、上記のコードのJSFiddleを以下に示します。 http://jsfiddle.net/SplashHero/qmccsc06/1/

8
Adam Howard

<hr>を使用する代わりに、囲みブロックの境界線の1つを水平線として表示できます。

サンプルコードを次に示します。

HTML：

<div class="title_block">
    <h3>This is a header.</h3>
</div>
<p>Here is some sample paragraph text.<br>
This demonstrates that a horizontal line goes between the title and the paragraph.</p>

CSS：

.title_block {
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
    margin-bottom: 5px;
}
3
James Wu

私はこの古い質問に答えていますが、それはGoogleクエリにまだ表示されており、最適な答えが1つ欠けていると思うからです：use :: beforeまたは:: after

<hr>をHTML5準拠の方法で左に揃える を参照してください

1
edo