Блог

Главная - Вопросы по программированию - Css и высота класса span внутри абзаца

Css и высота класса span внутри абзаца

#css

#css

Вопрос:

Как я могу сделать фон .post_headline_signup той же высоты, что и фон абзаца внутри div.

Вот мой код:

 <div class="post_headline">
    <p>Hello world<span class="post_headline_signup"><a href="site">text inside span</a></span></p> 
</div>

Это мой css:

 .post_headline {
background:url(images/signup_bg.jpg) repeat-x;
border-left:1px solid #555;
border-right:1px solid #555;
padding-left:1em;
height:2em;
line-height:2em
}
.post_headline p {
text-transform:uppercase
}
.post_headline a { 
font-weight:bold;
background:url(images/signup.jpg) repeat-x #900;
border-left:1px solid #000;
border-right:1px solid #000;
padding:1.2em; - **THE PROBLEM IS HERE - ONLY PADDING WORKS, LINE HEIGHT OR DIV HEIGHT DOESN'T**
margin-left:1em
} 
.post_headline a:hover { 
color:#FFF; 
text-decoration:underline 
}

Тьфу!

Комментарии:

1. .post_headline_signup не имеет фона в вашем CSS… Попробуйте установить привязку на display: inline-block;

Ответ №1:

фоновые изображения не могут (в css2) растягиваться, чтобы соответствовать их контейнеру. если вам нужно, чтобы он растягивался, вам нужно будет использовать его как <img/> (что тоже не очень хорошо (презентация против содержимого), однако это ограничение css2. Css3 может предлагать растягивание фона, но я не думаю, что я его видел)