我想把这个<hr>
做得能把它的整个宽度都拉到它的父容器的边缘。我试过添加左边距/右边距来克服这个问题,但是它在调整大小的时候一直在变化(响应)。
.single-article .article-container-inner {
background: #f0eded;
border: 1px solid #c9c7c7;
padding: 20px;
margin-bottom: 20px;
}
.single-article hr {
margin-top: 30px;
margin-bottom: 20px;
border: 0;
border-top: 1px solid #c9c7c7;
width:100%
}
<div class="article-container single-article">
<div class="article-container-inner">
<hr>
</div>
</div>
(also在http://jsfiddle.net/bh2f6/1/处)
有没有更好的解决办法?
编辑:我不能编辑父容器的填充,因为其他元素需要它。
5条答案
按热度按时间xxb16uws1#
你在
<hr />
上的width:100%;
和在父节点上的padding
把事情搞得一团糟。<hr />
自然地在屏幕上延伸,不需要width:100%
,所以删除它。然后为了补偿填充,只需在<hr />
上添加相同的负边距。将您的CSS更改为:
一个月一次
weylhg0b2#
像这样的东西可能有用...
http://codepen.io/achisholm/pen/ZWNwmG
dwbf0jvd3#
HR秘密你必须知道
当您的
horizontal rule
**(hr)**从左到右离开15px时,可能是当您与bootstrap
一起使用时。希望对很多人有帮助。
70gysomp4#
删除填充应该对您有用
Working Example
scyqe7ek5#
你是说像这样?
Fiddle
只需将填充更改为
padding: 20px 0;