在标题旁边添加分隔线

Question

这就是我想要实现的目标。事情是，如果可能的话，我希望它带有标题，并从容器中占用剩余的可用空间。

<div class="col-xs-12">
    <h4>Image Boxes <span class="sep"></span></h4>
</div>

这是html

h4 .sep{
    height:1px;
    width: 100%;
    display: inline-block;
    background: grey;
}

这就是CSS

我正在使用bootstrap框架

Answer 1

你可以做这样的事情

.col-xs-12{
    background-color: #f5f5f5;
}

h4{
    margin: 0;
    padding: 0;
    width: 20%;
    display: inline-block;
}

.sep{
   height: 1px;
   width: 80%;
   display: inline-block;
   background: grey;
   vertical-align: middle;
}

JSFIDDLE

<强>更新

好的，你可以这样做

NEW FIDDLE

.col-xs-12 {
   overflow: hidden; /* clear the float */
   background: #f5f5f5; 
}

h4 {
   width: 100px;
   float: left;
   margin: 0;
   padding: 0;
}


.sep {
   overflow: hidden;
}

span{
  height: 1px;
  display: inline-block;
  background: grey;
  vertical-align: middle;
  width: 100%;    
}

<强>更新

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

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

NEWEST FIDDLE