Я использую теги <span> в своих названиях модулей,
например
<span>Categories</span>.
Я указываю цвет фона/изображение, ширину и высоту диапазона в css.
Но ширина пролета зависит от его содержимого/текста.
Итак, если я делаю <span></span>, только с фоновым изображением/цветом в css, ничего не появляется.
Конечно, я хочу, чтобы что-то появилось.
Как я могу это решить?
Вы можете явно установить свойство display в "block", чтобы он вел себя как элемент уровня блока, но в этом случае вам, вероятно, просто нужно использовать div.
<span style="display:block; background-color:red; width:100px;"></span>
охватывает по умолчанию встроенный стиль, который вы не можете указать ширину.
display: inline-block;
будет хорошим способом, за исключением того, что IE не поддерживает его
вы можете, однако, взломать несколько решений для браузера
Вы не можете указать ширину элемента с встроенным дисплеем. Вы могли бы поместить что-то в него как неразрывное пространство ( ), а затем установить прописку, чтобы дать ей более широкую ширину, но вы не можете напрямую ее контролировать.
Вы можете использовать встроенный блок отображения, но он не поддерживается широко.
Настоящим взломом было бы поместить изображение внутрь, а затем установить его ширину. Что-то вроде прозрачного 1 пикселя GIF. Однако не рекомендуемый подход.
Используйте атрибут "display", как в примере:
<span style="background: gray; width: 100px; display:block;">hello</span>
<span style="background: gray; width: 200px; display:block;">world</span>
Я бы использовал атрибут padding. Это позволит вам добавить заданное количество пикселей в обе стороны элемента без элемента, теряющего его свойства диапазона:
Этот метод добавит только добавление, поэтому, если вы измените длину содержимого (например, из категорий в теги), размер содержимого изменится, и общий размер элемента также изменится. Но если вы действительно хотите установить жесткий размер, вы должны сделать так, как указано выше, и использовать div.
Подробнее о модели ячеек, содержании, отступов, марже и т.д. см. .
Как и в других ответах, запустите свои атрибуты span следующим образом:
display:inline-block;
Теперь вы можете использовать дополнение больше, чем ширина:
padding-left:6%;
padding-right:6%;
Когда вы используете дополнение, ваш цвет расширяется до обе стороны (справа и слева), а не только справа (например, в widht).
Зафиксировав высоту и ширину, вы можете сказать, как сделать bahave, если текст внутри нее переполняет ее область. Поэтому добавьте css
переполнение: авто;