Menu
Its simple to add a horizontal line in your markup, just add: <hr>. Browsers draw a line across the entire width of the container, which can be the entire body or a child element. Originally the HR element was styled using attributes.
The <hr> tag in HTML stands for horizontal rule and is used to insert a horizontal rule or a thematic break in an HTML page to divide or separate document sections. The <hr> tag is an empty tag, and it does not require an end tag.
You can try set display: inline-block; to your <hr> to render the horizontal line as an inline element with block properties. Also make sure that your markup and CSS is valid! E.g. a CSS rule margin: left; is wrong. Right would be: margin-left: 10px; .
I am trying to get a horizontal line to work in my blog site, but I am having trouble in displaying the line in google chrome (IE and Firefox display it perfectly).
Basically, in my CSS, I have the following:
div.hr {
background: #fff no-repeat scroll center;
margin-left: 15em;
margin-right: 15em;
width:50em;
height:.05em;
}
div.hr hr {
display: none;
}
In my HTML, I have something like:
<div class="hr"><hr /></div>
For some reason, in google chrome, the line is just not there. The problem now is, I have lots of these (around 25):
Upon googling, I see that many have had this problem, but there does not seem to be a proper solution (not considering "drawing" a line and inserting the line as a pic!).
I would appreciate if someone could point me in the right direction to solve the above problem.
Many thanks.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With