Adding a separator line alongside a heading

问题:

This i what i try to achieve. Thing is i want it to go with a heading if possible and occupy te rest of the available space from its container.

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

This is the html

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

And this the CSS

I am using the bootstrap framework

回答1:

you can do something like this

.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

UPDATE

Ok you can do it like this then

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

UPDATE

The text is going to collapse unless you set a width to contain it so if you need this to be dynamic just use jquery and determine the width of the h4 and set it to be that width. That way it will always adjust:

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

NEWEST FIDDLE

文章来源: Adding a separator line alongside a heading