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

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

<span>Categories</span>.

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

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

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

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

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

Ответы

Ответ 1

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

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

Ответ 2

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

display: inline-block;

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

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

Ответ 3

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

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

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

Ответ 4

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

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

Ответ 5

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

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

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

Подробнее о модели ячеек, содержании, отступов, марже и т.д. см. .

Ответ 6

Как и в других ответах, запустите свои атрибуты span следующим образом:

display:inline-block;

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

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

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

Ответ 7

Зафиксировав высоту и ширину, вы можете сказать, как сделать bahave, если текст внутри нее переполняет ее область. Поэтому добавьте css

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