Как установить свойство высоты для SPAN
Вопрос
Мне нужно сделать следующий код растягиваемым с предопределенной высотой.
<style>
.title{
background: url(bg.gif) no-repeat bottom right;
height: 25px;
}
</style>
<span class="title">This is title</span>
Но с тех пор охватывать является встроенным элементом, свойство «высота» не будет работать.
Я попробовал использовать div вместо этого, но он расширится до ширины верхнего элемента.И ширина должна быть гибкой.
Может ли кто-нибудь предложить хорошее решение для этого?
Заранее спасибо.
Решение
Дайте ему display:inline-block
в CSS - это должно позволить ему делать то, что вы хотите.
По совместимости:IE6/7 воля поработайте с этим, как предлагает режим совместимости:
IE 6/7 принимает значение только для элементов с естественным отображением:в соответствии.
Другие советы
Использовать
.title{
display: inline-block;
height: 25px;
}
Единственная хитрость — поддержка браузера. Проверьте, поддерживает ли ваш список поддерживаемых браузеров встроенную блокировку здесь..
это сделано для того, чтобы display:inline-block работал во всех браузерах:
Как ни странно, в IE (6/7) если вы запускаете hasLayout с «zoom:1», а затем устанавливаете отображение как встроенное, оно ведет себя как встроенный блок.
.inline-block {
display: inline-block;
zoom: 1;
*display: inline;
}
Предполагая, что вы не хотите делать его блочным элементом, вы можете попробовать:
.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>
.
охватывать { display: table-cell; height: (your-height + px); vertical-align: middle; }
Чтобы диапазоны работали как ячейка таблицы (или любой другой элемент, если на то пошло), необходимо указать высоту.Я задал промежуткам высоту, и они прекрасно работают, но вам придется добавить высоту, чтобы заставить их делать то, что вы хотите.
Другой вариант, конечно, — использовать Javascript (здесь Jquery):
$('.box1,.box2').each(function(){
$(this).height($(this).parent().height());
})
Зачем в этом случае нужен пролет?Если вы хотите задать стиль высоты, можете ли вы просто использовать div?Вы можете попробовать div с display: inline
, хотя здесь может возникнуть та же проблема, поскольку по сути вы будете делать то же самое, что и диапазон.