CSS ширина тега <span>

Question

Я использую <span> теги в названиях моих модулей, например

<span>Categories</span>.

Я указываю цвет фона / изображения, ширину и высоту диапазона в CSS.

Но ширина диапазона зависит от его содержимого / текста.

Итак, если я сделаю <span></span>, просто с фоновым изображением / цветом в css, ничего не появится.

Конечно, я хочу, чтобы что-то появилось.

Как я могу решить эту проблему?

Answer 1

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

display: inline-block;

было бы неплохо, за исключением того, что IE не поддерживает его

вы можете, однако, взломать решение с несколькими браузерами

Answer 2

Вы можете явно установить свойство display на «block», чтобы оно работало как элемент уровня блока, но в этом случае вам, вероятно, следует просто использовать вместо него div.

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

Answer 3

Нельзя указать ширину элемента с отображением на экране. Вы можете поместить в него что-то вроде неразрывного пробела (), а затем установить отступ, чтобы придать ему большую ширину, но вы не можете управлять им напрямую.

Можно использовать встроенный блок отображения, но это не поддерживается широко.

Настоящим хаком было бы поместить изображение внутрь, а затем установить его ширину. Что-то вроде прозрачного 1-пиксельного GIF. Однако не рекомендуемый подход.

Answer 4

Как и в других ответах, начните свои атрибуты span с этого:

display:inline-block;  

Теперь вы можете использовать отступ больше ширины:

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

Когда вы используете заполнение, ваш цвет увеличивается до с обеих сторон (справа и слева), а не только справа (как в widht).

Answer 5

Я бы использовал атрибут padding. Это позволит вам добавить заданное количество пикселей по обе стороны от элемента, не теряя при этом элемент качества:

• Не станет блоком
• Он будет плавать, как вы ожидаете

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

См. блочную модель для получения более подробной информации о блочной модели, содержимом, заполнении, полях и т. Д.

Answer 6

Используйте атрибут «display», как в примере:

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

Answer 7

Установив высоту и ширину, вы должны указать, как вести себя, если текст внутри него выходит за пределы его области. Так что добавьте в css

переполнение: авто;