如何在 div 的左右两侧设置 HR 样式？答案

【问题标题】：How to style in HR on left and right hand side of div?如何在 div 的左右两侧设置 HR 样式？
【发布时间】：2012-02-19 09:08:04
【问题描述】：

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

类似这样的：

--- 标题内容-----------------------------------

【问题讨论】：

您需要支持哪些浏览器？还有：你试过什么？
@Jeroen：IE9+、Chrome 16+、FF 9+。我试图用边框和线条属性来实现。

标签： html css

【解决方案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/

【讨论】：

【解决方案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;
}

【讨论】：