如何在div的左右两侧设置HR？

Question

如何在现有div中的文本左侧和右侧设置HR样式？

这样的事情：

--- Header Stuff -----------------------------------

Answer 1

如果你想使用一个HR标签，你可以在div上使用负边距将它放在hr的顶部，以完成你所描述的内容。

// HTML
<hr />
<div class="headline">A headline text</div>

// CSS
.headline {
    background-color: #fff;
    position: relative;
    margin: -20px 0 0 20px;
    float: left; 
}

放在一个小提琴中：http://jsfiddle.net/WmbsG/

Answer 2

这样的事情：

// Html
<h2>Header Stuff</h2>
<hr/>

// Css
h2
{
  background-color: #FFFFFF;
  display: inline-block;
  margin: 0 0 0 50px;
  padding: 0 10px;
}

hr
{
  margin-top: -13px;
}