在标题旁边添加分隔线 [英] Adding a separator line alongside a heading

问题描述

>

我试图实现。这是我想要它与一个标题，如果可能的话，占用从其容器的剩余可用空间。

 < div class =col-xs-12> 
< h4>图片框< span class =sep>< / span>< / h4& 
< / div> 
  

这是html

  h4 .sep {
 height：1px; 
 width：100％; 
 display：inline-block; 
 background：gray; 
} 
  

这是CSS

我使用引导框架

解决方案

您可以这样做

  .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：gray; 
 vertical-align：middle; 
} 
  

JSFIDDLE

UPDATE

您可以这样做

NEW FIDDLE

  .col-xs-12 {
 overflow：hidden; / *清除浮动* / 
 background：＃f5f5f5; 
} 
 
 h4 {
 width：100px; 
 float：left; 
 margin：0; 
 padding：0; 
} 
 
 
 .sep {
 overflow：hidden; 
} 
 
 span {
 height：1px; 
 display：inline-block; 
 background：gray; 
 vertical-align：middle; 
 width：100％; 
} 
  

UPDATE

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

  var naturalWidth = $（h4）。 
 $（h4）。css（{width：naturalWidth +px}）; 
  

NEWEST FIDDLE

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

解决方案

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

这篇关于在标题旁边添加分隔线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！