如何添加一行旁邊一個標題

enter image description here 如何添加一行旁邊一個標題

我想實現這樣的事情。重要！分隔線必須佔據包含標題中的剩餘部分。不，固定寬度不適用於任何一種。無論文本有多大或多小，我都需要它看起來像這樣。我正在使用twitter Bootstrap 3作爲框架

<h4>Events With Thumbnail <span class="h-sep"> </span> </h4> 

.h-sep{ 
    display: inline-block; 
    line-height:22px; 
    height:1px; 
    background-color: grey; 
    width: 100%; 
}

來源

2014-01-24 morgred

我已經給了你這個答案。文本將崩潰，除非你設置一個寬度來包含它，所以如果你需要這是動態的，只需使用jquery並確定h4的寬度並將其設置爲該寬度即可。這樣，它會隨時調整：

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

JSFIDDLE

來源

2014-01-24 02:46:01 jmore009

JavaScript是不能解決這樣的小問題。我有一個預感，這可以在CSS中完成。 – rvighne

@rvighne這不是一個微不足道的問題。而且我已經給了morce使用css的答案，問題是不能有固定的寬度，但文本和/或行不能放到不同的行當您調整瀏覽器 – jmore009

這裏是原始的帖子：http://stackoverflow.com/questions/21198691 /添加一個分隔線旁邊的標題 – jmore009

如何添加一行旁邊一個標題

回答

相關問題