1

这基本上在 h1 元素之前和之后添加了两行，如下所示： 该行只是一个高度为 1px 的背景颜色。

------------------------ 一些文字 ------------------------

我在 Chrome 和 Firefox 中对此进行了测试，一切正常，但是当我在 Internet Explorer 10 中进行测试时，未显示 LEFT 行。

.ItemHeader div h1 {
    position:relative;
    overflow:hidden;
    z-index: 1;
    text-align: center;
    font-weight:bold;
    font-size: 0.8em;
}
.ItemHeader div h1:before, .ItemHeader div h1:after {
    top: 50%;
    overflow:hidden;
    height: 1px;
    content:"\a0";
    background-color:#a2a2a2;
    position: absolute;
    width:50%;
}
.ItemHeader div h1:before {
    margin-left:-51%;
    text-align: right;
}
.ItemHeader div h1:after {
    margin-left:1%;
}
<div class="item-block">
    <div class="ItemHeader">
        <div>
            <h1>Application</h1>
        </div>
    </div>
</div>

签出JSFiddle

4

1 回答 1

3

这是您的解决方案：

.ItemHeader div h1 {
    position:relative;
    overflow:hidden;
    z-index: 1;
    text-align: center;
    font-weight:bold;
    font-size: 0.8em;
}
.ItemHeader div h1:before, .ItemHeader div h1:after {
    top: 50%;
    overflow:hidden;
    height: 1px;
    content:"\a0";
    background-color:#a2a2a2;
    position: absolute;
    width:50%;
}
.ItemHeader div h1:before {
    left:-5%;
    text-align: right;
}
.ItemHeader div h1:after {
    left:55%;
}
<div class="item-block">
    <div class="ItemHeader">
        <div>
            <h1>Application</h1>
        </div>
    </div>
</div>

删除margin-left代码中的属性并left改用。

它在 Chrome 和 IE10 中运行良好。

JSFiddle：http: //jsfiddle.net/4KX3u/7/

于 2013-10-31T19:33:38.260 回答