如何在标题旁添加一条线

Question

我正在努力实现这样的目标。重要！分隔线必须占据包含标题中可用的其余部分。不，固定宽度不会对任何一个都有效。无论文本中有多大或多小，我都需要它看起来像这样。我使用twitter Bootstrap 3作为框架

<h4>Events With Thumbnail <span class="h-sep"> </span> </h4>

.h-sep{
    display: inline-block;
    line-height:22px;
    height:1px;
    background-color: grey;
    width: 100%;
}

Answer 1

我已经给你答案了。文本将崩溃，除非你设置一个宽度来包含它，所以如果你需要它是动态的，只需使用jquery并确定h4的宽度并将其设置为该宽度。这样它总会调整：

var naturalWidth = $("h4").width();
$("h4").css({"width":naturalWidth+"px"});

JSFIDDLE