Как сделать так, чтобы заголовки (‹h1›) не занимали больше ширины, чем им нужно?

Если я определяю заголовок как <h1>, его ширина по умолчанию устанавливается равной 100%.

Есть ли способ убедиться, что его ширина установлена ​​на минимально возможное значение?


html css width
person Pieter    schedule 23.01.2010    source источник

Ответы (4)


arrow_upward
44
arrow_downward

Вы можете дать это display: inline. Это заставит его вести себя как любой текстовый элемент — по умолчанию для <h1> используется display: block.

Есть и другие способы: float: left например, но я считаю этот самый простой и с наименьшими побочными эффектами.

Обратите внимание, что вам, вероятно, придется добавить <br>, чтобы обеспечить разрыв строки после <h1>.

person Pekka    schedule 23.01.2010
comment
или ‹br/›, если это XHTML. (Нет необходимости использовать float:left, я думаю...) - person Dan; 23.01.2010

arrow_upward
22
arrow_downward

Вместо display: inline укажите display: inline-block. Это сохранит блочные качества тега h1, за исключением ширины 100%.

person DaveS    schedule 23.01.2010

arrow_upward
4
arrow_downward

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

person troelskn    schedule 23.01.2010

arrow_upward
3
arrow_downward

Есть ли способ убедиться, что его ширина установлена ​​на наименьшее возможное значение?

Я думаю, что width: fit-content; лучше.

https://jsfiddle.net/fqk1a2v6/

person Alisson Nunes    schedule 29.09.2019
comment
Следующий контент по-прежнему начинается со следующей строки в браузере Chrome... - person ghchoi; 29.09.2019
comment
@GyuHyeonChoi, ты прав. Но вопрос в ширине, которую используют заголовки, а не в конфигурации их отображения. - person Alisson Nunes; 29.09.2019