web-dev-qa-db-ja.com

HTML5に準拠した方法で<hr>を左に揃える

現在、私は使用しています

<hr align="left" />

私のHTML5ページで、しかし、私はalignプロパティがXHTML 4.01で廃止され、おそらくHTML5から削除されたと読んだ。このようなインライン属性ではなくCSSを使用したいのですが、試したときに

hr{align: left; max-width: 800px;}

またはhr{text-align: left;}またはhr{left: 0;}またはhr{float: left;}、ちょうど中央に現れた。

それで、上記のインライン属性の代わりに何を使うべきですか？

htmlcsshtml5standards
29
Chris Middleton

（Eliezer Bernartが言及しているように...そしてどうやら MDN doc へのリンク付きのコメントが消えたように）もはや「そのように動作しない」方法で何かを使用しようとしています。 IEでおかしくならない限り、マージンをゼロに設定することができます- http://jsfiddle.net/s52wb/

hr {
    max-width: 100px;
    margin: 0px;
}

ただし、HRを使用せずにCSSを使用してHRの古い方法を模倣することをお勧めします。 http://jsfiddle.net/p5ax9/1/ デモをご覧ください：

p:first-child:before {
    display: none;
}
p:before {
    content: " ";
    border: 1px solid black;
    margin-top: 15px;
    margin-bottom: 15px;
    display: block;
    max-width: 100px;
}
20
Stephen

1つのオプションは、左マージンをゼロに設定することです。

hr{max-width: 800px; margin-left:0;}
33
matt

上記の回答にどのブラウザが使用されたのかわかりませんが、どちらもtext-align:left nor margin-left:0は、IE（11、標準モード、HTML5）とFirefox（29）の両方で機能しました。

  • IE11：text-align:left動作、margin-left:0はルールを中央に置きます。

  • FF：margin-left:0動作、text-align:leftはルールを中央に置きます。

  • したがって、両方を使用するか、またはmargin-right:100%は両方で機能します！

13
JonBrave

代わりにdivタグを使用できます。

<div style="border: thin solid lightgray; width: 100px;"></div>
1
Art

これを行う

hr {
   display: inline;  //or inline-block
   text-align: left;
}
0
CRABOLO