2

我正在寻找一种将左右两个图像包含在标题范围内的方法。我面临的问题是，这个标题在某些情况下会跨越两行，但并非总是如此。我不想在标题之前/之后或之后包含两个额外的元素，而是寻找一种方法来实现我正在尝试的目标，而无需在代码中添加新元素。因此，我希望使用 :before 和 :after。这就是我想出的：

.block-title:before { position:absolute; content:""; display:inline-block; width:28px; height:14px; margin:2px 0 0 -36px; background:url(../images/sidebar_ornament_l.png) no-repeat 0 0; }
.block-title:after { position:absolute; content:""; display:inline-block; width:28px; height:14px; margin:2px 0 0 9px; background:url(../images/sidebar_ornament_r.png) no-repeat 0 0; }

虽然这会很好用，但如果标题只有一行，那么占据两行的标题不会像我想要的那样表现，而是看起来像这样：

标题错误

我已经尝试了我能想到的一切，让 :before 和 :after 伪元素按照我想要的方式运行，改变位置和显示，链接实际的文本跨度位置等，但就是无法实现我想要的。

由于我希望这两个图像与实际文本范围对齐，因此单个背景图像将不起作用。在某些情况下，文本和图像之间的间距会太大，看起来很奇怪。有没有办法使这项工作，所以我会以这样的两行标题结束：

更正标题

谢谢！

4

2 回答 2

1

好吧，这是一个一般概念，我需要您的完整代码来提供具体答案。

无论如何，检查这个演示

HTML：

<span class="block-title">Some text is here</span>
<hr>
<span class="block-title">Some more text<br>is here</span>
<hr>
<span class="block-title">Even<br>more text<br>is here</span>

CSS：

.block-title {
    position:relative;
    display:inline-block;
    text-align:center;
    padding:0 34px; /* width of your ornament + 6px per each side,
                        adjust to your actual layout */
}
.block-title:before, .block-title:after {
    content:" ";
    width:28px;
    height:14px;
    position:absolute;
    top:50%;
    margin-top:-7px; /* half of ornament's height */
}
.block-title:before {
    background:url(../images/sidebar_ornament_l.png) no-repeat 0 0;
    left:0;
}
.block-title:after {
    background:url(../images/sidebar_ornament_r.png) no-repeat 0 0;
    right:0;
}
于 2012-10-08T09:22:41.517 回答
0

如果将其应用于跨度，则规则可以。我做了这个代码（我改变了图像）http://jsfiddle.net/sSEDz/

于 2012-10-08T09:22:42.307 回答