2013-12-22 3 views
19

で左へ合わせHTML5に準拠した方法で現在


、私は私のHTML5ページに

<hr align="left" /> 

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

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

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

上記のインラインアトリビュートの代わりに、どうすればよいですか?

+0

さらにコードを投稿できますか? – Matthew

+0

このケースでは、本当に状況を助けるものではありません。スティーブンとマットの答えで十分だった。 –

+0

ああ、私がそれを投稿したとき、彼らは存在しませんでした。 – Matthew

答えて

14

あなたはエリエゼルBernartは言及して(という方法で何かを使用しようとしています。..そして明らかに、the MDN docへのリンクを持つコメントは消えていた)もはや「そのように働く」。しかしによって物事のHRの古いやり方を模倣するだろうhttp://jsfiddle.net/s52wb/

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

良いアイデア - あなたは、限り、あなたはちょうどゼロにマージンを設定し、それはIEで変にされて気にしないことができてHRを使用しないCSS。デモ用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; 
} 
+0

2番目の方法はちょっと時間がかかりすぎて、私にとっては少し複雑すぎますが、すべての段落の間に水平線を使用すれば覚えています。最初の方法は完璧です。ありがとうございました。 –

0

この

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

彼は彼の質問でこれはうまくいかないと言いました。 (後編集) – Matthew

+0

これは、実際には、非常に短い縦線が代わりに表示されます。それが何であるか分かりません。しかし、それは間違いなく機能しません。 –

24

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

hr{max-width: 800px; margin-left:0;} 
+1

簡潔な答えをありがとう。私は彼が将来の読者に関係するかもしれない他の情報を持っていたので、スティーブンに小切手を渡した。 –

12

私はブラウザは、いくつかの上記の回答のために使用されたのか分からないが、私はどちらもtext-align:leftmargin-left:0はIE(11、標準モードで、HTML5)とFirefox(両方で働いていました29)。

  • IE11:text-align:left作品、中心margin-left:0葉ルール。

  • FF:margin-left:0作品、text-align:left葉のルールが中央に配置されています。

  • したがって、またはのいずれかを使用すると、margin-right:100%が両方で動作することがわかりました。

1

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

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

ブートストラップを使用している場合は、col-*-offset-0クラスを追加できます。たとえば:

<hr class="col-xs-offset-0 col-sm-offset-0 col-md-offset-0" /> 

内部的にブートストラップには、margin-left:0;を追加します。

関連する問題