这是我努力实现的目标。问题是我希望它尽可能带有标题,并占用其容器中剩余的可用空间。
<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 框架
最佳答案
你可以这样做
.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;
}
更新
好吧,那你就这样吧
.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"});
关于html - 在标题旁边添加分隔线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21198691/