Question

我正在尝试使用除了hr之外的所有子元素的最大宽度的div，因此它将扩展屏幕的整个宽度。这就是我现在所做的不起作用：

#content :not(hr){
  margin-left: auto;
  margin-right: auto;
  max-width: 250px;
}

#content hr{
  height: 1px;
  color: #d3d3d3;
}
#container{
  min-height:100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -138px;
}

在html中：

<html>
  <body>
    <div id="container">
      <div id="header">...</div>
      <div id="content">
        ...
        <hr />
        ...
      </div>
    </div>
  </body>
</html>

Answer 1

也许不是最优雅的，但这可能适合您的需要：

<强> Demo Fiddle

只需使hr宽于窗口，并给它足够的负余量以大致居中。将溢出设置为隐藏可以消除多余的内容。

CSS：

/* new css */
#container {overflow: hidden;}

#content hr {
    width: 1000%;
    margin-left: -500%;
}

/* old css */
#content:not(hr){
  margin-left: auto;
  margin-right: auto;
  max-width: 250px;
}

#content hr{
  height: 1px;
  color: #d3d3d3;
}
#container{
  min-height:100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -138px;
}

如何使hr标签扩展屏幕的整个宽度

1 个答案: