Как установить свойство высоты для SPAN

Мне нужно сделать следующий код растяжимым с предопределенной высотой

<style>
.title{
   background: url(bg.gif) no-repeat bottom right;
   height: 25px;
}
</style>

<span class="title">This is title</span>

Но поскольку span является встроенным элементом, свойство height не работает.

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

Может ли кто-нибудь предложить какое-либо хорошее решение для этого?

Спасибо заранее.

Ответ 1

Дайте ему display:inline-block в CSS - это должно позволить ему делать то, что вы хотите.
С точки зрения совместимости: IE6/7 будет работать с этим, как предлагает режим quirks:

IE 6/7 принимает значение только для элементов с естественным отображением: inline.

Ответ 2

Используйте

.title{
  display: inline-block;
  height: 25px;
}

Единственный трюк - поддержка браузера. Проверьте, поддерживает ли ваш список поддерживаемых браузеров встроенный блок.

Ответ 3

это сделать отображение: встроенный блок работает во всех браузерах:

Достаточно Quirkly, в IE (6/7), если вы вызываете hasLayout с "zoom: 1", а затем установите отображение в строку, оно ведет себя как встроенный блок.

.inline-block {
    display: inline-block;
    zoom: 1;
    *display: inline;
}

Ответ 4

Предполагая, что вы не хотите, чтобы это был элемент блока, вы можете попробовать:

.title  {
    display: inline-block; /* which allows you to set the height/width; but this isn't cross-browser, particularly as regards IE < 7 */
    line-height: 2em; /* or */
    padding-top: 1em;
    padding-bottom: 1em;
}

Но самое простое решение - просто обработать .title как элемент уровня блока и использовать соответствующие теги заголовков <h1> через <h6>.

Ответ 5

span { display: table-cell; height: (your-height + px); vertical-align: middle; }

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

Ответ 6

Другим вариантом, конечно же, является использование Javascript (JQuery здесь):

$('.box1,.box2').each(function(){
    $(this).height($(this).parent().height());
})

Ответ 7

Зачем вам нужен пролет в этом случае? Если вы хотите создать высоту, вы можете просто использовать div? Вы можете попробовать div с display: inline, хотя это может иметь ту же проблему, поскольку вы фактически выполняете то же самое, что и span.