我试图有一个div，它的所有子元素的最大宽度除了hr，所以它会扩展屏幕的全宽度。这是我现在没有工作的内容:
#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>
可能不是最优雅的，但这可能适合您的需要:
演示小提琴
让hr比窗口宽，并给它足够的负边距，大致居中。将overflow设置为hidden将删除多余的
/* 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;
}