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

Question

I'm trying to have a div that has a max width for all its child elements except for hr, so it will extend the full width of the screen. 我正在尝试使div对其所有子元素（除hr以外）具有最大宽度，因此它将扩展屏幕的整个宽度。 This is what I have right now that's not working: 这是我现在无法正常工作的内容：

#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;
}

And in the html: 并在html中：

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

Answer 1

Perhaps not the most elegant, but this may work for what you need: 也许不是最优雅，但这可能会满足您的需求：

Demo Fiddle 演示小提琴

Just make the hr wider than the window, and give it enough negative margin to roughly center it. 只是使hr比窗口宽，并给它足够的负余量以使其大致居中即可。 Setting overflow to hidden gets rid of the excess. 将溢出设置为隐藏可消除多余的部分。

CSS: 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 个解决方案

解决方案1
1 已采纳 2014-05-06 19:30:34

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-05-06 19:30:34

解决方案1
1 已采纳 2014-05-06 19:30:34