html - 在标题旁边添加分隔线

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