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

Question 1

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

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

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

Но поскольку диапазон является встроенным элементом, свойство «высота» работать не будет.

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

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

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

Question 2

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

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

Question 3

Использовать

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

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

Question 4

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

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

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

Question 5

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

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

Question 6

размах { display: table-cell; height: (your-height + px); vertical-align: middle; }

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

Question 7

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

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

Question 8

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

Answer 1

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

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

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

Но поскольку диапазон является встроенным элементом, свойство «высота» работать не будет.

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

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

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

Answer 2

1

Вы должны использовать теги заголовков (h1, h2, h3, ...) для заголовков. Это более семантически правильно.

Пикелс,

Answer 3

1

Да, Пикелс вы правы. Спасибо всем за вашу помощь. Это мой последний css. У меня он отлично работает: <style> h4 {display: inline-block; масштабирование: 1; * дисплей: встроенный; маржа: 0px; высота: 25 пикселей; } </style>

Кельвин,

Answer 4

142

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

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

Casraf
источник

Как бы то ни было, IE7 не поддерживает inline-block.

Скотт Крэнфилл,

Np. @Scott: Я не вижу этого на W3 - вот что они говорят:

Note: No versions of Internet Explorer (including IE8) support the property values "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", or "table-row-group".

casraf

2

@henasraf - @ Скотт прав, я тоже не могу его использовать из-за быстроты: quirksmode.org/css/display.html

Ник

2

Цитата:IE 6/7 accepts the value only on elements with a natural display: inline.

casraf

1

Ахах, я думаю, это сработает, если применить к spanthen. Спасибо за информацию, henasraf.

Скотт Крэнфилл,

Answer 5

Как бы то ни было, IE7 не поддерживает inline-block.

Скотт Крэнфилл,

Answer 6

Np. @Scott: Я не вижу этого на W3 - вот что они говорят:

Note: No versions of Internet Explorer (including IE8) support the property values "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", or "table-row-group".

casraf

Answer 7

2

@henasraf - @ Скотт прав, я тоже не могу его использовать из-за быстроты: quirksmode.org/css/display.html

Ник

Answer 8

2

Цитата:IE 6/7 accepts the value only on elements with a natural display: inline.

casraf

Answer 9

1

Ахах, я думаю, это сработает, если применить к spanthen. Спасибо за информацию, henasraf.

Скотт Крэнфилл,

Answer 10

Использовать

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

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

Answer 11

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

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

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

Answer 12

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

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

размах { display: table-cell; height: (your-height + px); vertical-align: middle; }

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

Answer 14

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

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

Answer 15

-4

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

Сет Петри-Джонсон
источник

3

Или вообще проигнорируйте мою бессвязную болтовню и используйте ответ henasraf :)

Сет Петри-Джонсон,

Комментарии с отрицательным голосованием просто отпугивают тех, кто хочет внести свой законный вклад. Прекрати! Вместо этого просто предложите конструктивный отзыв или, что более важно, ваше собственное мнение по этому поводу.

Answer 16

3

Или вообще проигнорируйте мою бессвязную болтовню и используйте ответ henasraf :)

Сет Петри-Джонсон,

Answer 17

Комментарии с отрицательным голосованием просто отпугивают тех, кто хочет внести свой законный вклад. Прекрати! Вместо этого просто предложите конструктивный отзыв или, что более важно, ваше собственное мнение по этому поводу.

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

Ответы: