как добавить строку рядом с заголовком

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 это не тривиальная проблема. И я уже дал morged ответ, используя css, проблема в том, что не может быть фиксированной ширины, но текст и/или линия can not выпадают на другую строку при изменении размера браузера. – jmore009

здесь было оригинальное сообщение: http://stackoverflow.com/questions/21198691/add-a-separator-line-along-a-heading – jmore009

как добавить строку рядом с заголовком

ответ

Смежные вопросы