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

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 fiddle : http://jsfiddle.net/Ne5GE/2/