css 如何制作< hr>全幅？

atmip9wb 于 2023-01-18 发布在其他

关注(0)|答案(5)|浏览(146)

我想把这个<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/处）
有没有更好的解决办法？
编辑：我不能编辑父容器的填充，因为其他元素需要它。

css

来源：https://stackoverflow.com/questions/21921665/how-to-make-hr-full-width

5条答案

按热度按时间

xxb16uws1#

你在<hr />上的width:100%;和在父节点上的padding把事情搞得一团糟。<hr />自然地在屏幕上延伸，不需要width:100%，所以删除它。然后为了补偿填充，只需在<hr />上添加相同的负边距。
将您的CSS更改为：

.single-article hr {
    margin: 30px -20px 20px;
    border: 0;
    border-top: 1px solid #c9c7c7;
}

一个月一次

赞(0）回复(0）举报 2023-01-18

weylhg0b2#

像这样的东西可能有用...

hr {
  padding: 50px 0;
  border: none;

  &:before {
    // full-width divider
    content: "";
    display: block;
    position: absolute;
    right: 0;
    max-width: 100%;
    width: 100%;
    border: 1px solid grey;
  }
}

http://codepen.io/achisholm/pen/ZWNwmG

赞(0）回复(0）举报 2023-01-18

dwbf0jvd3#

HR秘密你必须知道

当您的horizontal rule**（hr）**从左到右离开15px时，可能是当您与bootstrap一起使用时。

<hr class="my-hr-line">

.my-hr-line {
    position: relative;
    left: -15px;
    width: calc(100% + 30px);
    height: 2px;
    border: 2px solid blue;
}

希望对很多人有帮助。

赞(0）回复(0）举报 2023-01-18

70gysomp4#

删除填充应该对您有用
Working Example

.single-article .article-container-inner {
    background: #f0eded;
    border: 1px solid #c9c7c7;
    margin-bottom: 20px;
}
.single-article hr {
    margin-top: 30px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #c9c7c7;
    width:100%
}

赞(0）回复(0）举报 2023-01-18

scyqe7ek5#

你是说像这样？
Fiddle
只需将填充更改为padding: 20px 0;

赞(0）回复(0）举报 2023-01-18