底部边框比 div 更宽的 CSS 解决方法

Question

我正在为一个博客设计主题，希望用一条细线分隔每篇文章。每篇文章都居中且宽度为800像素。因此，

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

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

但是，由于帖子

本身只有800像素宽度，border-bottom也将是800像素宽，并且位于帖子下方的中心位置。我希望有一个小的分隔符，可以跨越整个屏幕，而无需将div的宽度设置为100%。 有任何想法吗？

- user2350274

---

请展示你的HTML代码，可以添加到fiddle或者直接链接到你的页面。 - pavel

要不考虑使用简单的 "<hr>" 分割线？ - T J

添加 display:inline-block; 并移除导致元素溢出的填充。 - MarmiK

Answer 1

如果您的.post没有相对定位，则可以这样做：

html {
    width: 100%;
}

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

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

<div class="post">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit perspiciatis ipsam necessitatibus repudiandae molestias soluta possimus rerum cum. Veritatis pariatur harum est assumenda nemo voluptas distinctio cum adipisci error voluptatem!</div>
<div class="post">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit perspiciatis ipsam necessitatibus repudiandae molestias soluta possimus rerum cum. Veritatis pariatur harum est assumenda nemo voluptas distinctio cum adipisci error voluptatem!</div>

See original JS Fiddle here.

- webkit

---

基本假设是这个底部边框应该占据父容器的100％..无论是body还是其他任何容器..只要.post元素本身不是相对定位，这个解决方案就应该有效。 - webkit

@TJ 首先我不敢相信你提到了IE5 ;].. 其次你说得有道理.. 我也喜欢你的解决方案（少用CSS），但我喜欢这个解决方案，因为（少用HTML）你不需要记得在每篇文章后面包含<hr>，而且你还需要在CSS中为它设置样式.. 而使用这个方法，你只需编写你的文章，样式就会自动使用CSS完成.. 建议将样式与结构分离。 - webkit

我讨厌IE 5、6、7、8、9……这只是为了争论而加上的……哈哈……算了吧 :) - T J

Answer 2

不要使用border-bottom，而是使用: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;
}

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

- Richard Hovdsveen

---

为什么有人给我点了负数？这是一个解决方案，虽然不是很好，但确实解决了问题。 - Richard Hovdsveen

Answer 3

使用<hr>标签。

演示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;
}

更新演示

- T J