установить динамическую ширину только с CSS? - PullRequest
Новая
       20

установить динамическую ширину только с CSS?

5 голосов
/ 26 марта 2012

У меня есть заголовок (h1), который центрирован на странице.Я хочу добавить строки слева и справа от заголовка, чтобы они занимали всю ширину страницы.Однако я хочу, чтобы линии адаптировались к ширине заголовка, что является динамическим.Итак, я хочу, чтобы ширина линии вычислялась динамически.

Вот пример того, что я пытаюсь выполнить: http://jsfiddle.net/cAEqE/1/

В этом примере я установил ширину линий на 35%, чтобы они могли получить эффект, который я хочу.Однако, если заголовок длиннее, он разбивается на 2 строки, и я не хочу, чтобы это произошло.

Мой начальник сказал мне избегать JavaScript, поэтому было бы хорошо использовать только CSS.Однако, если это окажется невозможным, я перейду к старому доброму jQuery.Ура!

Редактировать: на сайте есть фоновое изображение, поэтому я не могу использовать фон на h1.Спасибо!

Ответы [ 2 ]

5 голосов
/ 26 марта 2012

Вы можете написать так:

CSS 

h1 {
    font-size: 26px;
    text-align:center;
    display:inline-block;
    *display:inline;/* For IE7*/
    *zoom:1;/* For IE7*/
    background:#fff;
    padding:0 10px;
}

#title {
    text-align:center;
    border-bottom:1px solid #97999C;
    height:10px
}

HTML 

<div id="title">
    <h1>TITLE TEST</h1>
</div>

Проверьте это http://jsfiddle.net/cAEqE/27/

ОБНОВЛЕНО

Проверьте это http://jsfiddle.net/cAEqE/63/

2 голосов
/ 26 марта 2012

Вместо использования div s для строк, вы должны использовать фоновое изображение для родителя div.

Например, ваш HTML будет намного проще: 

<div id="content">
    <h1>TITLE TEST</h1>
</div>​

И ваш CSS будет: 

h1 {
    font-size: 26px;
    background-color: white;
    display:inline;
    padding:0 30px;
}

#content {
    text-align:center;
    width:100%;
    background:transparent url(https://jira.atlassian.com/s/en_UKtovngv/725/4/1.0/_/images/mod_header_bg.png) repeat-x left center;
    margin:0;
    padding:0;
}

Я украл немало этого кода у Джиры, который делает в основном то, что вы ищете .

...