如何使<hr />页面的全宽而不管父级

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>

Answer 2

如果是我，我会将标记重构为：

<div id="menu">
    <div class="buttons">Buttons</div>
</div>
<div id="main">
    Main
</div>

并使用CSS作为水平线：

#menu 
{
    width:100%;
    border-top:solid 1px black;
    border-bottom:solid 1px black;    
}

#menu .buttons, #main
{    
    width:400px;
    margin:0 auto;
}

#menu .buttons
{    
    background-color:#F00;
}

Demo