Html 使用线条设置标题样式

从某种意义上说，这很简单，但我已经花了几个小时试图解决这个问题，所以我决定把这个问题写下来，也许在你的帮助下，我可以找到一个解决办法

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

示例标题--------------------------------------------

另一个例子是标题---------------------------------

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

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

我当时想的一件事是：

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

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

希望你能理解我的问题：这对我很有效

HTML

---

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

html（可以是h1、h2或h3）

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);
}

• 标题宽度=包装内标题文本的宽度
• 行图像宽度=包装宽度-标题文本宽度

---

希望这能有所帮助：）

哈克，但可能是这样的：

HTML:

---

是

示例标题-----------------

您已经拥有或想要构建的东西吗？是的，这是一个非常有趣的问题。我现在唯一想到的是可能在某种程度上使用了

display:table cell

，但这似乎有点令人讨厌。标题的实际背景可以是白色，也可以是灰色，所以标题1不能有任何背景色，它应该是透明的。基本上这和我以前试过的一样，但它是一个非常复杂的版本。快速和肮脏的胜利！不是漂亮的，而是有用的！我认为这可能是没有JS.Yup的唯一方法。它不可爱，但至少它是纯CSS，而且应该是非常跨浏览器友好的，从我所看到的。谢谢，这是一种方法，但我认为我会使用32bitkid提供的脏HTML和CSS。

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

.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
}

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

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 */
}

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);
}

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

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; }