How to make horizontal rule not stretch over?

2018-06-04 21:43:52

I figured out how to get it to not stretch over the left side by using margin-left but when I try to get the right side by using margin-right it doesn't work. Is there another way to do this in CSS? Here's what I got..

HTML

<div class="Heading">Painting</div>
<hr draggable="auto" color="#FB2529">

CSS

hr { color:#FB2529;
width:100%;
margin-top:-15px;
margin-left:29%;
height:.2px;
}

You can make it work by adjusting the width property in your css.. margin-left and margin-right should also be relative to the width ..

when you adjust the margin in the left, the width is still 100% in the page and so, the right overflows...

to fix that, I suggest using this:

hr {  
   color:#FB2529;
   width:98%;
   margin-top:-15px;
   margin-left:1%;
   margin-right: 1%;
   height:.2px;
}

as you can see the sum of width , margin-left , and margin-right totals to 100% representing the width of the area.. if you want to set it instead in pixels, you can.. however, you should know the specific width in pixels also..

链接地址: http://www.djcxy.com/p/15762.html

上一篇: Unstyling <hr>当它被包装在一个div中时

下一篇: 如何使横向规则不被拉伸？