html - 如何使 页面全宽而不考虑父级

Question

如何制作 <hr>宽度为屏幕的 100%，而不是其父级？

CSS

#abc {
  width: 700px;
}

hr {
  width: 100%;
}

HTML

<div id="abc">adsasd<hr></div>

Answer 1

您不能按照结构化的方式进行操作。你需要 <hr>在具有固定宽度的容器之外。否则 <hr> 的 100% 宽度将是其父级的亲戚，而不是页面。尝试

<div id="abc">
  adsasd
</div>
<!-- put the hr on its own -->
<hr>
<div id="def">
  asdfghjkl
</div>

您可以做的另一件事是将内容包含在具有该宽度的容器中，而不是包含内容和 hr 的 div。

<div id="row"><!-- use a class that takes up all the width of the page -->
  <div class="has-width">adsasd</div> <!-- create a class with a width-->
  <hr>
</div>