Нарисуйте строку после текста до конца строки

У меня есть заголовок для страницы, я хочу иметь строку, которая начинается после текста и которая идет до конца строки, независимо от ширины окна , вид:Нарисуйте строку после текста до конца строки

TITLE----------------------------------------------------------------------------

но сплошная линия, я просто написал ее - для демонстрации. Я видел <hr>, но он всегда идет по строке после, он не остается после текста. Я также видел this post, но это не совсем то, что я хочу.

Спасибо!

источник

2012-05-23 castors33

Полная ширина, половина высоты с границей ?? – ManseUK

Я пробовал, но это не сработало ... Я пробовал: ' castors33

Хорошо, вот еще один ответ. Вы можете просто использовать Fieldset элемент вместо

<fieldset> 
    <legend>Title comes here</legend> 
    </fieldset>

и стиль его это

fieldset { border-top:1px solid #333; }

Вот са демо: http://jsfiddle.net/SQujE/

источник

2012-05-23 17:57:51 walmik

это почти идеально ... Я не понимаю, почему ... но моя всегда написана так: '--TITLE -------' это не придерживаться слева в качестве примера делает ... это простой вариант? – castors33

Да просто установите дополнение (и margin) в 0px в элементе fieldset в вашем CSS. Если он все еще не работает, добавьте! Важно для него. – walmik

http://jsfiddle.net/MFhsV/ Вы можете избавиться от поля и! Важно, если он будет работать без него. – walmik

Попытайтесь иметь два элемента DIV. Первая из них может быть 100% шириной страницы и может содержать в ней вторую.

Позвольте внутреннему DIV содержать текст «Заголовок» и автоматически настроить себя. Сделайте фон внешнего div изображением линии и сделайте фон внутреннего div тем же цветом, что и обычный фон страницы.

источник

2012-05-23 17:36:19

Мне нравится идея! Но я не понимаю, почему, он не работает ... У меня есть это '

TITLE

' и в моем 'CSS':' div.ligne {width: 100%; background-color: # e5e5e5;} span.TitleClass {background-color = # FF0000; } 'Я пробовал сначала с упрощенным цветом ... единственной« разницей »в том, что мой второй тег - это« span' – castors33

Для часового элемента вы можете использовать дисплей CSS свойство со значением инлайн-блок вместе с шириной

hr { display: inline-block; width: 90%; }

и в вашем HTML,

Title<hr />

Демо: http://jsfiddle.net/67f2E/

Небольшая вариация со словом «Заголовок» и элемент hr, выровненный по вертикали до середины: http://jsfiddle.net/wHPQA/

источник

2012-05-23 17:38:15 walmik

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

Попробуйте это:

Title<hr style="display: inline-block; width: 90%; margin-bottom: 4px; margin-left: 5px;" />

На основании ответа saganbyte в. margin-bottom играть со смещением снизу и margin-left слева. Логики нет?

источник

2012-05-23 17:44:01

ну, но, как я сказал саганбайту, для меня мало авто. Но спасибо! – castors33

Я знаю, что мой ответ немного поздно, но это было давно сделать что вы хотели.

HTML:<span id="test" >HI</span>

JS:

document.getElementById("test").style.position="relative"; 
var line=document.createElement("div"); 
line.setAttribute("style","width:"+(document.getElementsByTagName("html")[0].offsetWidth-document.getElementById("test").offsetWidth-1)+"px;height:1px;position:absolute;top:6px;left:"+(document.getElementById("test").offsetWidth+1)+"px;background-color:black;"); 
document.getElementById("test").appendChild(line);

Fiddle:http://jsfiddle.net/QrEgH

Бонус:
1-No CSS, только небольшой блок JS ,
2-Очень маленький HTML, вы просто добавляете span.
3-Эта скрипка, которая менее сжата и с комментариями: http://jsfiddle.net/VfCJ3

источник

2012-05-23 20:21:14 Mageek

Нарисуйте строку после текста до конца строки

ответ

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