Align <hr> to the left in an HTML5-compliant way
Solution 1
You're trying to use something in a way that (as Eliezer Bernart mentions.. and apparently that comment with the link to the MDN doc disappeared) no longer "works that way". You can, as long as you don't mind it being screwy in IE, just set the margin to zero - http://jsfiddle.net/s52wb/
hr {
max-width: 100px;
margin: 0px;
}
A better idea though would be to mimic the HR's old way of doing things by way of CSS without the use of the HR. Check out http://jsfiddle.net/p5ax9/1/ for a demo:
p:first-child:before {
display: none;
}
p:before {
content: " ";
border: 1px solid black;
margin-top: 15px;
margin-bottom: 15px;
display: block;
max-width: 100px;
}
Solution 2
One option would be to set the left margin to zero:
hr{max-width: 800px; margin-left:0;}
Solution 3
I don't know what browsers were used for some above answers, but I found neither text-align:left
nor margin-left:0
worked in both IE (11, Standards mode, HTML5) and Firefox (29).
IE11:
text-align:left
works,margin-left:0
leaves rule centred.FF:
margin-left:0
works,text-align:left
leaves rule centred.So, either use both, or I found that
margin-right:100%
works for both!
Solution 4
You can use div tag instead.
<div style="border: thin solid lightgray; width: 100px;"></div>
Chris Middleton
Updated on April 20, 2021Comments
-
Chris Middleton about 3 years
Currently, I'm using
<hr align="left" />
on my HTML5 page, but I've read that the align property was deprecated in XHTML 4.01 and supposedly removed from HTML5. I'd like to be using CSS rather than an inline attribute like this, but when I tried
hr{align: left; max-width: 800px;}
or
hr{text-align: left;}
orhr{left: 0;}
orhr{float: left;}
, it just showed up in the center.So what should I use instead of the inline attribute above?
-
Matthew over 10 yearsHe's mentioned in his question that this didn't work. (Post edited)
-
Chris Middleton over 10 yearsThis actually made a very short vertical line show up instead. Not sure what that's about. But it definitely doesn't work.
-
Chris Middleton over 10 yearsThe second way is a little too complex for just putting a hr in, for me, but I'll keep it in mind if I use a horizontal line between every paragraph. The first way is perfect though. Thank you.
-
Chris Middleton over 10 yearsThanks for the concise answer. I gave Stephen the check since his had other info that might be pertinent to future readers.
-
MegaTux over 4 yearsfirst option, with only
margin-left: 0
worked great, thks -
Blorf over 3 years
margin-right
is the way to go. I found setting it toauto
prevented the margin from always extending past the edge of the container. -
Rocky Kev over 3 yearsI like the idea. But definitely overkill, and all the !important can be very destructive.