Question

我有一些看起来像这样的HTML代码

<div class="container">
  <!-- SOME OTHER CONTEN HERE -->
  <hr>
  <!-- SOME OTHER CONTENT HERE -->
</div>

类容器的宽度为90％，我希望hr能够从屏幕的左右移动。为了给hr正确的宽度，我使用宽度：100vw，但它仍将从.container类开始的地方开始，我试图通过使用margin-left：-10％解决这个问题，但这不适用于所有不同的分辨率，I我也尝试过absloute和left：0但是这搞砸了上面和下面的内容流。

.container {
  width: 90%
}

hr {
 width: 100vw;
}

如何确保hr在屏幕上并排显示而不会弄乱其上方和下方内容的流量？

Answer 1

我会将以下CSS应用于hr隐藏hr并使用:after伪元素来实现效果，使用left和transform是为了避免:after超出页面宽度并导致水平滚动

hr { margin-bottom: 1px; height: 0; border: 0; position: relative; }
hr:after {
  display: inline-block;
  content: '';
  position: absolute;
  bottom: 1px;
  left: 50%; // Positioning
  height: 1px;
  width: 100vw;
  background-color: #e5d5d5;
  -webkit-transform: translateX(-50%); // Positioning
  transform: translateX(-50%); // Positioning
}

试试：https://jsfiddle.net/Zay_DEV/n16uysLn/

Answer 2

在这种情况下，我会将position: absolute用于<hr>

https://codepen.io/jacobgoh101/pen/zKAXLk

<div class="container">
  <!-- SOME OTHER CONTEN HERE -->
  <hr>
  <!-- SOME OTHER CONTENT HERE -->
</div>

CSS：

.container {
  width: 90%;
  background-color: red;
  height: 200px;
  position: relative;
}

hr {
 width: 100vw;
  position: absolute;
  top: 110%;
}

对于position: absolute父元素为position: relative的元素，它绝对会将其自身置于其父级内。

top: 110%将其定位比div的底部低10％

您需要在<div>添加额外的margin-bottom，以避免与<hr>

下的元素重叠<div>

强制hr从父容器外部开始

2 个答案: