Question

在某种程度上这很简单，但我一直试图弄清楚这几个小时，所以我决定把问题写下来，也许在你的帮助下我找到了解决方案。

在布局标题（h1，h2，h3）旁边有一条线。基本上是这样的：

示例标题-------------------------------------------- < / p>

另一个示例标题---------------------------------

再来一次--------------------------------------------- ---------

这就是最终结果（-----是gfx作为背景图像）。你会怎么做？背景颜色可能会改变和/或具有不透明度。

我在想的一件事就是：

<h1><span>Example Heading</span></h1>

当CSS看起来像这样：

h1 {
background-image: url(line.png);
}
h1 span {
background: #fff;
}

但是，由于背景颜色可能不是白色（#fff），因此不起作用。

希望你明白我的问题：D

Answer 1

Hacky，但也许是这样的：

HTML：

<h1>
    <span>Test</span>
    <hr>
    <div class="end"></div>
</h1>

和css：

h1 span{ float :left; margin-right: 1ex; }
h1 hr {
    border: none;
    height: 1px;
    background-color: red;
    position: relative;
    top:0.5em;
}
h1 div.end { clear:both; }

Fiddle here

Answer 2

这对我有用。

HTML

<div class="title">
    <div class="title1">TITLE</div>
</div>

CSS

.title {
    height: 1px;
    margin-bottom: 20px;
    margin-top: 10px;
    border-bottom: 1px solid #bfbfbf;
}
.title .title1 {
    width: 125px;
    margin: 0 auto;
    font-family: Arial, sans-serif;
    font-size: 22px;
    color: #4c4c4c;
    background: #fff;
    text-align: center;
    position: relative;
    top: -12px
}

Answer 3

我不认为你可以用纯css实现这个，因为标题文本可以是任何长度。这是一个动态的JavaScript解决方案，它根据标题文本的宽度设置线图像的宽度。

Click here for jsfiddle demo

html（可以是h1，h2或h3）

<div class="heading-wrapper">
    <h1>Example Heading</h1>
    <img src="line.png" width="193" height="6" alt="" />
</div>

CSS

h1{font-size:16px}
h2{font-size:14px}
h3{font-size:12px}
h1,h2,h3{margin:0;padding:0;float:left}
.heading-wrapper{width:300px;overflow-x:hidden}
.heading-wrapper img{
    float:right;padding-top:9px;
    /*ie9: position:relative;top:-9px */
}

jquery的

setHeadingLineWidth('h1');
setHeadingLineWidth('h2');
setHeadingLineWidth('h3');

function setHeadingLineWidth(selector){
    var hWidth;
    var lineWidth;
    var wrWidth = $('.heading-wrapper').width();

    hWidth = $(selector,'.heading-wrapper').width();
    lineWidth = wrWidth - hWidth;
    $(selector).siblings('img').width(lineWidth);
}

标题宽度=包装器内标题文本的宽度
线图像宽度=包装纸宽度 - 标题文字宽度

希望有所帮助：）

样式标题与一条线

3 个答案: