Question

我正在尝试在我的WordPress网站上创建一条水平线，与我的容器和下面的文本完美对齐。 see image here

我似乎无法将其与我网站的正文容器对齐。有没有办法设置底部边框的样式，使其宽度为200px，例如。？

Answer 1

您可以创建另一个具有固定宽度的div，并使用底部边框设置样式：

<body>
  <div class="bodyContainer">
    <p>This is the main container.</p>
    <div class="borderBottom"></div>
  </div>
</body>

CSS：

.borderBottom {
  width: 300px;
  border-bottom: 1px solid black;
}

如果您的身体容器具有固定高度，请将.borderBottom div移至身体容器外部。希望有所帮助。

Answer 2

另一种方法是使用CSS Pseudo-elements currently supported by all major browsers。这样您就可以删除HTML中的额外div。示例代码如下：

 <div class="bodyContainer">
    <p>This is the main container.</p>
 </div>

.bodyContainer::after {
  content: '';
  width: 200px;
  border-top: 1px solid black;
  display: block;
}

边框底部造型。使边框底部与导航栏菜单的宽度相同

2 个答案: