将边框应用于占用 div 边距的区域

我有一个容器，它的固定宽度为 200px，其余宽度在两侧边距相等。我已经在这个容器上应用了底部边距，但它只会占用 200px 的宽度，因为这是容器框的宽度。如何使底部边框占据整个屏幕宽度。

法典：

.sch-container{
  max-width:200px;
  margin:0 auto;
  text-align:center;
  border-bottom:1px solid red
}

<div class="sch-container">
    <div class="content">
        Hello
    </div>
</div>

小提琴

实现为

两个类将是最佳选择。

.sch-container{
  border-bottom:1px solid red;
}
.content{
  max-width:200px;
  margin:0 auto;
  text-align:center;
}

<div class="sch-container">
   <div class="content">
     Hello
   </div>
</div>

这不是解决您问题的直接解决方案，而是一种替代方案。您可以使用<hr />标签而不是border-bottom .sch-container。

.sch-container{
  max-width:200px;
  margin:0 auto;
  text-align:center;
}
hr{
    height: 1px;
    border: 0;
    border-top: 1px solid;	
}
.red{
	border-color: red;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Some Title</title>
</head>
<body>
<div class="sch-container">
    <div class="content">
        Hello
    </div>
</div>
<hr class="red"/>	
</body>
</html>

相关内容

最新更新

热门标签：