Question

我有这条线

<div class="fixedwidthDiv HRSeparator"></div>

在我继承的html代码中。它分隔文本段落。 我想要的是在此水平线的左右两侧添加15px的填充，因为我使用bootstrap col-md-12类也添加了这个并且我有

<div class="fixedwidthDiv col-md-12">

也在我的html的多个地方。所以我想对齐文本的起始位置和水平线。

http://jsfiddle.net/Ne5GE/1/

Answer 1

如果您希望将元素下方的文本与水平线对齐，请将所有内容包装在带衬垫的容器中。

<强> HTML

<div id="container">
<div class="fixedwidthDiv HRSeparator"></div>
    <p>This is some text that will align with the HRSeparator</p>
</div>

<强> CSS

.container{
    margin: 0px 15px;
}
.HRSeparator {
    border-bottom: 1px solid;
    margin-bottom: 2em;
    margin-top: 2em;
}
.fixedwidthDiv {
   overflow: hidden;
   max-width: 900px;
}

JS小提琴： http://jsfiddle.net/Ne5GE/2/

如何为html边框添加填充/类似效果

1 个答案: