Html 使用CSS的底边框比div宽

我现在正在为一个博客设计一个主题，我想用一条细线分隔各个帖子。每篇文章都居中，宽度为800像素。所以自然,

.post {
  background: #fff;
  margin: 40px auto;
  width: 800px;
  padding-bottom: 40px;
  border-bottom: 1px solid grey;
}

在柱子下面给了我一个漂亮的小边框

---

但是，由于帖子本身只有800像素宽，因此边框底部也将有800像素宽，并在帖子下方居中。我希望有一个小分隔符，可以在整个屏幕上显示，而不必将div的宽度设置为

100%

。有什么想法吗？

使用：after代替边框底部

范例

.post {
       background: #fff;
       margin: 40px auto;
       width: 800px;
       padding-bottom: 40px;
       /*border-bottom: 1px solid grey;*/
    }
.post:after {
    content:"";
    display:block;
    border-bottom:1px solid #000;
    height:0px;
    width:820px;
    position:relative;
    left:-10px;
}

---

查看获得的宽度和左定位。

使用：after代替边框底部

范例

.post {
       background: #fff;
       margin: 40px auto;
       width: 800px;
       padding-bottom: 40px;
       /*border-bottom: 1px solid grey;*/
    }
.post:after {
    content:"";
    display:block;
    border-bottom:1px solid #000;
    height:0px;
    width:820px;
    position:relative;
    left:-10px;
}

---

查看获得的宽度和左定位。

如果您的

。post

不是相对定位的，则可以执行此操作：

html{
宽度：100%；
}
.邮政{
背景：青色；
利润率：40px自动80px；
宽度：400px；
}
.post：：之后{
位置：绝对位置；
左：0；
内容：“；
显示：块；
高度：40px；
边框底部：1px纯色灰色；
宽度：100%；
}

Lorem ipsum door sit amet，concetetur adipsicing elit。透明膜，透明膜，透明膜，透明膜，透明膜，透明膜，透明膜，透明膜，透明膜，透明膜，透明膜。真理是平等的，这是一个不平等的错误！
Lorem ipsum dolor sit amet，奉献精英。透明膜，透明膜，透明膜，透明膜，透明膜，透明膜，透明膜，透明膜，透明膜，透明膜，透明膜。真理是平等的，这是一个不平等的错误如果您的
.post
不是相对定位的，则可以执行此操作：


html{
宽度：100%；
}
.邮政{
背景：青色；
利润率：40px自动80px；
宽度：400px；
}
.post：：之后{
位置：绝对位置；
左：0；
内容：“；
显示：块；
高度：40px；
边框底部：1px纯色灰色；
宽度：100%；
}
Lorem ipsum door sit amet，concetetur adipsicing elit。透明膜，透明膜，透明膜，透明膜，透明膜，透明膜，透明膜，透明膜，透明膜，透明膜，透明膜。真理是平等的，这是一个不平等的错误！
Lorem ipsum dolor sit amet，奉献精英。透明膜，透明膜，透明膜，透明膜，透明膜，透明膜，透明膜，透明膜，透明膜，透明膜，透明膜。真理是平等的，这是一个不平等的错误使用
标记


它将创建贯穿整个屏幕的小分隔符，而无需将
的宽度设置为
100%
。您也不必担心任何定位属性或浏览器支持

更新
如果不存在浏览器支持问题，则可以使用
vw
unit和css伪元素（假设元素水平居中）创建一个分隔符，覆盖整个屏幕，而不考虑容器的宽度：

html

使用
标记


它将创建贯穿整个屏幕的小分隔符，而无需将
的宽度设置为
100%
。您也不必担心任何定位属性或浏览器支持

更新
如果不存在浏览器支持问题，则可以使用
vw
unit和css伪元素（假设元素水平居中）创建一个分隔符，覆盖整个屏幕，而不考虑容器的宽度：

html

向我们展示你的HTML，直接添加到fiddle或zour页面的链接。一个简单的
怎么样？添加
显示：内联块并删除导致元素溢出的填充。显示HTML，直接添加到fiddle或zour页面的链接。一个简单的
？添加
显示：内联块
并删除导致元素溢出的填充。基本假设是此底部边框应占父容器的100%。。不管是尸体还是其他。。只要.post元素本身不是相对的，这个解决方案就应该有效。@TJ首先，我不敢相信你刚才提到了IE5；]。。其次，你说得有道理。。我也喜欢你的解决方案（较少的css），但我喜欢这个解决方案，因为（较少的html）你不必记得在每篇文章之后都包含
，而且你还需要在css中为它设置页边空白的样式。。有了这个，你只需写你的文章，样式是用CSS自动完成的。。按照建议将风格与结构分离。我讨厌ie 5,6,7,8,9。。只是为了争论才加上的。。英雄联盟忘记它：）基本假设是这个底部边框应该占据父容器的100%。。不管是尸体还是其他。。只要.post元素本身不是相对的，这个解决方案就应该有效。@TJ首先，我不敢相信你刚才提到了IE5；]。。其次，你说得有道理。。我也喜欢你的解决方案（较少的css），但我喜欢这个解决方案，因为（较少的html）你不必记得在每篇文章之后都包含
，而且你还需要在css中为它设置页边空白的样式。。有了这个，你只需写你的文章，样式是用CSS自动完成的。。按照建议将风格与结构分离。我讨厌ie 5,6,7,8,9。。只是为了争论才加上的。。英雄联盟算了吧：）为什么有人不喜欢我？这是一个解决方案，它不好，但它确实解决了人们所要求的问题？为什么有人不考虑我？这是一个解决方案，它不好，但它确实解决了它所要求的？
.demo {
 position:relative;
}
.demo::after {
 content:"";
 display:block;
 box-sizing:border-box;
 position:absolute;
 left:-50%;
 bottom:0;
 width:100vw;
 border-top:1px solid black;
}