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

Question

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

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

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

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

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

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

Заранее спасибо.

Answer 1

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

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

Answer 2

Использование

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

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

Answer 3

это делается для того, чтобы display: inline-block работал во всех браузерах:

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

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

Answer 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>.

Answer 5

Другой вариант - использовать Javascript (здесь Jquery):

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

Answer 6

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

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

Answer 7

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