如何在当前父级的层次结构中获取上面的父级宽度

Question

我的＆lt;＆lt;＆lt; 主要＆gt;＆gt;在一个包装器中，它将它保存在页面中心的一列中。但是，我想要一个＆lt;＆lt; hr ＆gt;＆gt;在它的各个部分之间标记，我希望它跨越页面的整个宽度。我怎么能这样做？

Answer 1

您可以使用rem或px来设置其宽度。不要使用百分比。

您可以通过反复试验设置rem的值。请记住应用程序将使用的设备，相应地设置值。

Answer 2

您应该更新您的问题，以包含一段显示您所拥有内容的代码，因为答案可能取决于您使用包装器中的css如何使内容居中。

例如，如果您使用填充来执行此操作，则可能是您要求的：

.wrapper {
   padding: $padding;
}
hr {
  position: relative;
  width: 100% + 2 * $padding;
  left: -$padding;
}

.wrapper {
  padding: 0 40px;
  background-color: green;
}

.main {
  background-color: red;
  padding: 20px;
}

.main2 {
  background-color: blue;
  padding: 20px;
}

hr {
  position: relative;
  width: calc(100% + 80px);
  left: -40px;
}

<div class='wrapper'>
  <div class='main'></div>
  <hr>
  <div class='main2'></div>
  
</div>

---编辑--- 通过你的评论，我知道你有最大宽度和margin-auto的包装器，然后我建议从包装器中删除它并将margin和max-width应用于main，hr将自己扩展到全宽，无需额外更改。

.wrapper {
  background-color: green;
}

.main, .main2 {
  max-width: 60%;
  margin: auto;
  padding: 20px;
}
.main {
  background-color: red;
}

.main2 {
  background-color: blue;  
}

<div class='wrapper'>
  <div class='main'></div>
  <hr>
  <div class='main2'></div>
  
</div>