Горизонтальная линия по заголовку правой стороны

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

#wrapper #content-holder #main-content #newhead { 
margin-top: 0px; 
margin-right: -0x; 
margin-bottom: 0px; 
margin-left: 0px; 
font-family: 'Rokkitt', 'Lucida Grande', Helvetica, Arial, sans-serif; 
font-size: 40px; 
color: #333; 
text-align: left; 
font-style: normal; 
font-variant: normal; 
font-weight: 600; 
line-height: normal; 
font-size-adjust: none; 
font-stretch: normal; 
letter-spacing: -2px; 
/*text-transform: uppercase; 
border-bottom:1px solid #15A2FF;*/ 
}

Рядом:

<div id="newhead"><?php the_title(); ?></div>

Но по какой-то причине я не могу получить линии, чтобы показать на стороне текста заголовка.

Пожалуйста, помогите. http://jsbin.com/ILOlivI/1/edit

источник

2013-12-01 Anonymous

Что вы имеете в виду под «быть горизонтальной линией с правой стороны заголовков страниц»? Вам нужна горизонтальная линия, вертикально выровненная с серединой текста заголовка, которая начинается с нескольких пикселей справа от последнего слова в заголовке и заканчивается в крайнем правом углу экрана? – koenpeters

Да, точно. Спасибо. –

Вы должны проверить элемент '

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

Я думаю, что я использовал бы фоновое изображение в строке заголовка, которое будет перезаписано фоновым цветом текста. Что-то вроде этого:

<div id="newHead"><div>the header text</div></span> 

    #newHead { 
    background: white url(http://tidesonline.nos.noaa.gov/images/black_line.jpg) center left repeat-x; 
    } 
    #newHead div { 
    background-color: white; 
    display: inline-block; 
    padding-right: 10px; 
    }

Вот jsfiddle пример: http://jsfiddle.net/mVqY6/

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

источник

2013-12-01 23:59:27 koenpeters

Спасибо. Работает. –

Если вы пытаетесь установить горизонтальный линейный уровень со средней строкой текста, пограничный дно на самом деле не работает, не так ли?

В верхней части моей головы я бы использовал изображение с одним пикселем .gif, растянутое до 100% оставшегося пространства и выровненное до середины текста ... или если вы хотите, чтобы пиксель идеально соответствовал определенному тексту размер, используйте 1px wide .gif, в котором есть ваша строка, плюс x число прозрачных пикселей ниже.

Вы можете ввести строку SVG или поплавать DIV рядом с текстом, который является половиной высоты, с верхним или нижним краем. Решение DIV, вероятно, будет иметь наибольший смысл, если вы хотите остаться в чистом CSS/HTML.

источник

2013-12-01 23:57:55

Горизонтальная линия по заголовку правой стороны

ответ

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