如何使横向规则不延伸？

Question

我想出了如何通过使用margin-left来让它不在左侧伸展但是当我尝试通过使用margin-right来获得右侧时它不起作用。还有其他方法可以在CSS中执行此操作吗？ 这就是我得到的......

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;
}

Answer 1

您可以通过调整css中的width属性来使其工作.. margin-left和margin-right也应相对于width ..

当你调整左边的边距时，width在页面中仍然是100％，因此，右边溢出......

要解决这个问题，我建议使用它：

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

您可以看到width，margin-left和margin-right的总和为100％表示该区域的宽度..如果您想以像素为单位设置它，你可以......但是，你应该知道具体的宽度（以像素为单位）..