Я использую теги <span> в своих названиях модулей, например.CSS ширина <span> тег
<span>Categories</span>.
Уточняю пролете в цвет фона/изображения, ширина и высота в CSS.
Но ширина диапазона зависит от его содержания/текста.
Итак, если я делаю <span></span>, только с фоновым изображением/цветом в css ничего не появляется.
Конечно, я хочу, чтобы что-то появилось.
Как я могу это решить?
Вы можете явно указать свойство отображения «block», чтобы он вел себя как элемент уровня блока, но в этом случае вы, вероятно, должны просто использовать div.
<span style="display:block; background-color:red; width:100px;"></span>
спасибо, я вижу. это происходит потому, что интервал является встроенным. Теперь я вижу разницу. inline & block. да, div подходит.: D..thanks –
Используя DIV внутри абзацев, заголовки (h1, h2 и т. д.) нарушали бы проверку, если вам это нужно. Еще одно возможное решение - использовать span, display: block; и float: left; :) –
спасибо, а ответ ниже был критическим для того, чтобы получить ширину работы – Angela
Вы не можете указать ширину элемента с встроенным дисплеем. Вы могли бы поместить что-то в него, как неразрывное пространство ( ), а затем установить прописку, чтобы дать ей более широкую ширину, но вы не можете напрямую ее контролировать.
Вы можете использовать дисплей встроенного блока, но он не поддерживается широко.
Настоящим хаком было бы разместить изображение внутри, а затем установить его ширину. Что-то вроде прозрачного 1 пикселя GIF. Однако не рекомендуется.
охватывает по умолчанию встроенный стиль, который вы не можете указать ширину.
display: inline-block;
будет хорошим способом, за исключением IE не поддерживает
Вы можете, однако, hack a multiple browser solution
Я считаю, что IE поддерживает встроенный блок с по крайней мере версией 6. Я думаю, что он поддерживает только встроенный блок, если элемент, к которому он применяется, является естественным встроенным (что и является ). –
Да, IE поддерживает встроенный блок. Его поддержка немного отличается, но в этом случае она будет работать. – thomasrutter
Удивительный! Начав понимать реальные различия в отображении: –
Используйте атрибут 'Дисплей', как в примере:
<span style="background: gray; width: 100px; display:block;">hello</span>
<span style="background: gray; width: 200px; display:block;">world</span>
Я бы использовал атрибут padding. Это позволит вам добавить определенное количество пикселей с каждой стороны элемента без элемента теряет свои пролетных качества:
Этот метод добавит только добавление, поэтому, если вы измените длину содержимого (например, из категорий в теги), размер содержимого изменится, и общий размер элемента также изменится. Но если вы действительно хотите установить жесткий размер, вы должны сделать так, как указано выше, и использовать div.
Смотрите box model для получения более подробной информации о блочной модели, содержание, обивка, края и т.д.
Зафиксировав высоту и ширину вы sholud рассказать, как bahave если текст внутри него перетекает его площадь.Поэтому добавьте в css
overflow: auto;
Как и в других ответах, начните пядь атрибуты с этим:
display:inline-block;
Теперь вы можете использовать отступов больше чем ширина:
padding-left:6%;
padding-right:6%;
При использовании отступов, цвет расширяется до обе стороны (правый и левый), не только правый (как в widht).
Я хотел бы отметить, что это не очень хорошо использовать диапазон. Он предназначен для обозначения коротких диапазонов содержимого в более крупном целом, поэтому по умолчанию он не является блочным элементом. Для заголовков лучшим будет один из тегов h #. В противном случае div всегда лучше, чем диапазон. – Chuck
Спасибо за ваши ответы ..: D Я нахожу это глупым q'n, чтобы начать с lol..о много лет назад. =)) –