Как создать строку после моего текста в ширину контейнера?

Question

Да, я новичок, поэтому, пожалуйста, успокойся. Я знаю, что для этого нужно сделать несколько способов. В основном я пытаюсь найти последовательный способ иметь заголовок с линией после текста, который будет работать до полной ширины элемента контейнера.

Что-то вроде этого:

This is my header _______________________________________________________ |<- end container 
This is another header __________________________________________________ |<- end container 

Я пытаюсь создать класс .Строки, который будет использовать снизу границу, чтобы создать линию, но я был неудачным при создании переменной длиной строки, которая будет распространяться полную ширину контейнера.

Вот что я пробовал:

CSS:

.line 
{ 
    display:inline-block; 
    border-bottom:2px #5B3400 solid; 
    margin-left:5px; 
    width:80%; 
} 

HTML:

<h2>Our Mission<span class="line"></span></h2> 

Конечно, это только дает мне линию 80% емкости от левой границы включая ширину текста. Как создать строку, которая начинается после текста, и пробегает всю ширину рамки независимо от того, сколько текста находится в одной строке?

Я знаю, что это должно быть легко, но я не смог найти решение еще.

Спасибо!

Answer 1

Этот метод будет работать с текстурированным Backgrounds (background images):

Вы можете попробовать использовать этот метод вместо этого, если ваш <h2> находится поверх фонового изображения.

HTML:

<h2 class="line-title"><span>This is my title</span><hr /></h2> 

CSS:

.line-title { 
    font-size: 20px; 
    margin-bottom: 10px; 
    padding-top: 1px; /* Allows for hr margin to start at top of h2 */ 
} 

/* clearfix for floats */ 
.line-title:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

.line-title span { 
    padding-right: 10px; 
    float: left; 
} 

.line-title hr { 
    border:1px solid #DDD; 
    border-width: 1px 0 0 0; 
    margin-top: 11px; 
} 

Смотрите рабочий пример здесь: http://jsfiddle.net/yYBDD/1/

Как это работает:

1. тэг <h2> действует как контейнер для плавающего элемента.

2. <span> плавает влево, в результате чего <hr /> свернуть влево и заполнить нужное пространство.

3. <hr /> действует как линия и заполняет оставшееся пространство справа.

Answer 2

HTML:

<h2><span>Our Mission</span></h2> 

CSS:

h2{ 
    border-bottom: 1px solid #000; 
    height: 20px; 
    overflow: visible; 
    display: block; 
    width: 100%; 
} 

h2 span{ 
    display: inline-block; 
    background: #fff; 
    height: 21px; 
} 

Таким образом, она будет переливаться на нижней границе, он имеет большую высоту.

Демо: http://jsfiddle.net/afuzk/

Answer 3

Этот метод будет работать с солидными ФОН ЦВЕТА:

HTML:

<h2 class="line-title"><span>This is my title</span></h2> 

CSS:

.line-title { 
    border-bottom: 1px solid #DDD; 
    font-size: 20px; 
    height: 12px; 
    margin-bottom: 10px; 
} 

.line-title span { 
    background: #FFF; 
    padding-right: 10px; 
} 

Вы можете увидеть рабочий пример здесь: http://jsfiddle.net/yYBDD/

Как это работает.

1. <h2> тег имеет класс, который устанавливает высоту до половины высоты текста она содержит.

2. <h2> имеет нижнюю границу, которая простирается до ширины его родительского контейнера (поскольку это элемент блока).

3. <span> внутри <h2> имеет белый фон, который будет охватывать область, где текст и граница перекрываются.

4. И, наконец, <h2>> имеет нижний край, который компенсирует уменьшенную высоту <h2>.

Answer 4

Вот то, что я пытался и работал:

HTML

<h2>Our Mission</h2> 

CSS

h2:after 
{ 
    content:  "\00a0"; 
    border-bottom: solid 2px black; 
    position:  fixed; 
    top:   0; 
    width:   100%; 
    margin-left: 3px; 
} 

JS Bin для теста: http://jsbin.com/ayuvuc/4

Answer 5

Вы можете использовать flexbox для этого.

http://jsfiddle.net/eHHep/ (префиксы не включены)

<h1 class="lineme">This is my header</h1> 

<h2 class="lineme">This is another header</h2> 

.lineme { 
    display: flex; 
} 

.lineme:after { 
    display: block; 
    content: " "; 
    border-bottom: 1px solid; 
    flex: 1 1 auto; 
} 

Преимущества по сравнению с другими методами:

• Без дополнительной разметки не требуется
• Цвет фона не требуется

вниз сторона:

• Поддержка Flexbox низка из-за IE10 является первым IE, чтобы поддержать его (см http://caniuse.com/#search=flexbox)
• Ваша линия уходит, если ваш текст обтекает