Как установить свойство высоты для ПРОМЕЖУТКА
Я должен сделать следующий код поддающимся растягиванию с предопределенной высотой
<style>
.title{
background: url(bg.gif) no-repeat bottom right;
height: 25px;
}
</style>
<span class="title">This is title</span>
Но так как промежуток является встроенным элементом, свойство "высоты" не будет работать.
Я пытался использовать отделение вместо этого, но оно расширится до ширины верхнего элемента. И ширина должна быть гибкой.
Кто-либо может предложить какое-либо хорошее решение для этого?
Заранее спасибо.
5 ответов
Дайте ему display:inline-block в CSS - это позволит ему делать то, что вы хотите.
Что касается совместимости: IE6/7 будет работать с этим, так как режим quirks предполагает:
IE 6/7 принимает значение только для элементов с естественным display: inline.
Используйте
.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 как элемент уровня блока и с использованием соответствующих тегов заголовка с по
.
Зачем в таком случае нужен пролет? Если вы хотите стилизовать высоту, можете ли вы просто использовать div? Вы можете попробовать использовать div с display: inline , хотя это может иметь ту же проблему, поскольку вы, по сути, будете делать то же самое, что и span.