Yahoo Answers is shutting down on May 4th, 2021 (Eastern Time) and beginning April 20th, 2021 (Eastern Time) the Yahoo Answers website will be in read-only mode. There will be no changes to other Yahoo properties or services, or your Yahoo account. You can find more information about the Yahoo Answers shutdown and how to download your data on this help page.
Trending News
HTML - How to make a horizontal line?
I'm having trouble making a horizontal line. I'm using this code right now but it doesn't reach the edges of the page. I want it across the site touching the edges.
hr {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}
2 Answers
- ChrisLv 76 years agoFavorite Answer
hr is a block level element, which means that by default, it'll occupy all available space horizontally. So if it doesn't reach the edges that means the parent element doesn't reach the edges either.
Three ways to fix this:
a) restructure your layout by using a wrapper container without padding, then add padding to the <div>s or <p>s before and after your <hr/>s.
b) make them wider by using this:
hr {
width: 120%;
position: relative;
left: -10%
}
This will expand them by 10% of the parent element's width. You can also use fixed pixel values. Unfortunately, one can't combine pixels and percent yet.
c) use this rule:
hr {
position: absolute;
width: 100%;
left: 0
}
position: absolute takes the <hr/> out of the document flow, so unless you have a complex layout, this should position them at the left edge of <html> and spanning the width of <html>.
You can choose another element as parent by applying "position: relative" to it.
The downside is that elements after <hr/> will act as if <hr/> isn't there, and you'll have to add margins so they don't overlap it.
- ?Lv 66 years ago
Try:
hr {
width:100%;
}
You can also try to put width:100; with your css to see what will happen.
You know you also have to use HTML.
HTML:
<hr>
