Question

我正在为博客设计一个主题，我希望用细线分隔各个帖子。每个帖子都居中，宽800像素。很自然地，

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

在帖子下面给我一个漂亮的小边框。

但是，因为帖子<div>本身只有800像素宽，所以边框底部也会800像素宽，并且位于帖子下方。我希望在整个屏幕上都有一个小分隔符，而不必将div的宽度设置为100%。有什么想法吗？

Answer 1

如果你的.post没有相对位置，你可以这样做：

工作DEMO

html { width:100%;}

.post {
    background: #fff;
    margin: 40px auto 80px;
    width: 400px;
    }

.post:after {
    position:absolute;
    left:0;
    content: " ";
    display:block;
    height:40px;
    border-bottom: 1px solid grey;
    width:100%;
}

Answer 2

使用：而不是使用边框底部。

实施例

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

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

Answer 3

使用<hr>标记。

Demo fiddle

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

更新

如果古代浏览器支持不是问题，您可以创建一个覆盖整个屏幕的分隔符，无论使用vw单位和css伪元素的容器宽度如下（假设元素居中水平地）：

HTML

<div class='demo'></div>

CSS

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

底部边框比使用CSS更宽泛

3 个答案:

更新

Updated Demo