Ширина CSS тегу <span>


82

Я використовую <span>теги в заголовках моїх модулів, наприклад

<span>Categories</span>.

Я вказую колір / зображення фону, ширину та висоту проміжку в css.

Але ширина прольоту залежить від його змісту / тексту.

Отже, якщо я це роблю <span></span>, лише із фоновим зображенням / кольором у css нічого не з’являється.

Звичайно, я хочу, щоб щось з’явилося.

Як я можу це вирішити?


4
Я просто хотів би зазначити, що це не дуже вдале використання діапазону. Він призначений для позначення коротких діапазонів вмісту в більшому цілому, тому за замовчуванням це навмисно не є блочним елементом. Для заголовків найкращим буде один із тегів h #. У противному випадку div все-таки зазвичай краще, ніж span.
Чак

дякую за ваші відповіді ..: D Я вважаю це безглуздим питанням для початку. lol .. так багато років тому. =))
mars-o

Відповіді:


115

Ви можете явно встановити для властивості display "block", щоб він поводився як елемент рівня блоку, але в такому випадку вам слід скоріше використовувати просто div.

<span style="display:block; background-color:red; width:100px;"></span>

дякую, я бачу. це трапляється, тому що інтервал вбудований. тепер я бачу різницю ставки. вбудовані та блоковані дисплеї. так, div є доречним
.: D .. дякую

4
Використання DIV всередині абзаців, заголовки (h1, h2 тощо) порушать перевірку, якщо вам це важливо. Іншим можливим рішенням є використання прольоту, дисплея: блок; і плавати: ліворуч; :)
Арве Систад

спасибі, і відповідь нижче була критично важливою, щоб ширина працювала
Сумка

3
краще використовувати inline-blockзамістьblock
Євген Конков

125

охоплює за замовчуванням вбудований стиль, для якого ви не можете вказати ширину.

display: inline-block;

було б непоганим способом, за винятком того, що IE його не підтримує

однак ви можете зламати рішення для декількох браузерів


2
Я вважаю, що IE підтримує вбудований блок, принаймні з версії 6. Я думаю, він підтримує вбудований блок, лише якщо елемент, до якого він застосовується, є вбудованим (що <span>).
Кен Браунінг

3
Так, IE підтримує вбудований блок. Його підтримка дещо інша, але в цьому випадку це спрацює.
thomasrutter

Чудово! Починаючи розуміти справжні відмінності в показі:
Дін Міхан

6

Ви не можете вказати ширину елемента з вбудованим відображенням. Ви можете вкласти в нього щось на зразок нерозривного пробілу (), а потім встановити відступ, щоб надати йому трохи більше ширини, але ви не можете керувати ним безпосередньо.

Ви можете використовувати вбудований блок відображення, але це не широко підтримується.

Справжнім хаком було б помістити всередину зображення, а потім встановити ширину. Щось на зразок прозорого 1-піксельного GIF-файлу. Однак не рекомендований підхід.


3

Я б використав paddingатрибут. Це дозволить вам додати встановлену кількість пікселів по обидві сторони елемента, не втрачаючи при цьому своїх якостей прольоту:

  • Це не стане блоком
  • Він буде плавати, як ви очікуєте

Однак цей метод лише додасть до заповнення, тому, якщо ви зміните довжину вмісту (наприклад, із Категорій на Теги), розмір вмісту зміниться, а загальний розмір елемента також зміниться. Але якщо ви дійсно хочете встановити жорсткий розмір, вам слід зробити, як зазначено вище, і використати div.

Дивіться модель коробки, щоб отримати докладнішу інформацію про модель коробки, вміст, відступ, поля тощо.


3

Як і в інших відповідях, почніть атрибути span з цього:

display:inline-block;  

Тепер ви можете використовувати прокладки більше ширини:

padding-left:6%;
padding-right:6%;

Коли ви використовуєте відступ, ваш колір розширюється в обидві сторони (вправо та вліво), а не лише вправо (як у widht).


2

Використовуйте атрибут 'display', як у прикладі:

<span style="background: gray; width: 100px; display:block;">hello</span>
<span style="background: gray; width: 200px; display:block;">world</span>

1

Визначивши висоту та ширину, ви повинні сказати, як рухатись, якщо текст усередині нього переповнює його область. Тож додайте в css

переповнення: авто;

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.