Як встановити властивість висоти для SPAN

88

Мені потрібно зробити наступний код розтяжним із заданою висотою

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

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

Але оскільки span - це вбудований елемент, властивість "height" не працюватиме.

Я спробував використовувати div замість цього, але він розшириться до ширини верхнього елемента. А ширина повинна бути гнучкою.

Хтось може запропонувати якесь хороше рішення для цього?

Заздалегідь спасибі.

css height html

— Кельвін
джерело

1

Для заголовків слід використовувати теги заголовків (h1, h2, h3, ...). Це більш семантично правильно.

— Пікельс

1

Так, ти маєш рацію Пікельс. Дякуємо усім за допомогу. Це мій останній css. Для мене це чудово працює: <style> h4 {display: inline-block; масштабування: 1; * дисплей: вбудований; поле: 0px; висота: 25px; } </style>

— Кельвін

142

Дайте це display:inline-blockв CSS - це дозволить йому робити те, що ви хочете.
Що стосується сумісності: IE6 / 7 буде працювати з цим, як передбачає режим примх:

IE 6/7 приймає значення лише для елементів із природним відображенням: вбудований.

— касраф
джерело

Те, чого це варте, 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

Ага, я думаю, це спрацює, якщо застосувати до spanтоді. Дякую за інформацію, henasraf.

— Скотт Кранфілл

25

Використовуйте

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

Єдина хитрість - підтримка браузера. Перевірте, чи ваш список підтримуваних браузерів обробляє тут вбудований блок .

— Джон Геллоуей
джерело

13

це для того, щоб display: inline-block працював у всіх браузерах:

Досить дивно, в IE (6/7), якщо ви активуєте hasLayout із "масштабуванням: 1", а потім встановите вбудований дисплей, він поводиться як вбудований блок.

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

— І.засоби
джерело

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

— Девід каже, щоб відновити Моніку
джерело

0

проліт { display: table-cell; height: (your-height + px); vertical-align: middle; }

Щоб прольоти працювали як клітинка таблиці (або будь-який інший елемент), потрібно вказати висоту. Я дав прольотам висоту, і вони прекрасно працюють, але ви повинні додати висоту, щоб змусити їх робити те, що ви хочете.

— mike s
джерело

0

Інший варіант, звичайно, це використання Javascript (тут Jquery):

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

— Ukuser32
джерело

-4

Навіщо в цьому випадку потрібен проліт? Якщо ви хочете оформити висоту, можете просто використати div? Ви можете спробувати div display: inline, хоча це може мати таку ж проблему, оскільки ви фактично робите те саме, що і інтервал.

— Сет Петрі-Джонсон
джерело

3

Або взагалі ігноруйте мої блукання та використовуйте відповідь генасрафа :)

— Сет Петрі-Джонсон

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