Ширина заголовков (H1, H2 и т. д.)

Я хочу, чтобы мои заголовки (от h1 до h6) имели цвет фона (отличный от цвета фона страницы), я также хочу, чтобы ширина этого фона была такой же, как ширина текста в заголовке, плюс отступы (не ширина контейнера, в котором находится заголовок, что и происходит сейчас).

Нет особого смысла показывать вам какой-либо код, так как он довольно прост (или так и должно быть!). Контейнер имеет фиксированную ширину. Прямо сейчас у меня есть только некоторые поля, отступы, цвет фона и стиль шрифта для тегов h1, h2, h3 и т. д.

EDIT: я думаю, код поможет! https://web.archive.org/web/20090724165158/http://adriantrimble.com/headers (здесь применено решение Джеральда, хотя очевидно, что оно по-прежнему не будет работать в IE6/7 и все еще имеет проблемы в более новых браузерах). Использование display:inline вызывает больше проблем, чем решает, использование float:left и clear:left, как уже упоминалось, имеет проблемы из-за макета с двумя столбцами. Спасибо всем за помощь.


css header width
person Adrian Trimble    schedule 21.07.2009    source источник
comment
Если это просто, я смущен вашей потребностью в помощи. Я понимаю, что мы знаем некоторые вещи, которых не знаете вы, но демонстрация вашего кода позволяет нам определить, какие стили и позиционирование применяются. Это также демонстрирует, насколько глубоко вы вкладываете свои заголовки. Это сайт для кодеров, который помогает кодерам; код важен для нас.   -  person David says reinstate Monica    schedule 21.07.2009
comment
Да, показать код не помешало бы. Я предполагаю, что у вас могут быть проблемы с разной шириной в Firefox и IE, потому что вы устанавливаете ширину и отступы в заголовке или контейнере, что вызывает проблемы с IE.   -  person ryanulit    schedule 21.07.2009
comment
Ссылка на страницу добавлена.   -  person Adrian Trimble    schedule 21.07.2009
comment
Ну, ссылка на страницу, к сожалению, мертва...   -  person kralyk    schedule 25.03.2014

Ответы (7)


arrow_upward
16
arrow_downward

я хотел бы использовать

#rightcol h1, #rightcol h2, #rightcol h3, #rightcol h4, #rightcol h6, #rightcol h6 {
   float:left;
   clear:left;
}
#rightcol p {clear:left;}

редактировать после комментария

Если содержащий div плавает, очистка не очистит левый столбец. Так что плавайте rightcol влево и удаляйте поля

#rightcol {
   float:left;
   padding:70px 20px 20px 0px;
   width:585px;
}
person Emily    schedule 21.07.2009
comment
К сожалению, это заставляет содержимое очищать левый столбец, а также очищать друг друга. (см. adriantrimble.com/headers/clear.html). Спасибо хоть! - person Adrian Trimble; 21.07.2009
comment
Затем поместите правый столбец влево, и очистка не очистит левый столбец. Я добавил код в свой пост. - person Emily; 21.07.2009

arrow_upward
46
arrow_downward

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

<h1 style="background-color:pink; display:inline-block; padding:1em;">Testheader</h1>

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

person Gerald Senarclens de Grancy    schedule 21.07.2009
comment
Некоторые браузеры позволяют использовать display:inline-block для любого элемента, но IE6/7 допускают его только для элементов, которые по умолчанию являются display:inline. Как обычно, IE всем портит вечеринку. - person Gabriel Hurley; 21.07.2009
comment
Это правильный ответ (отображение: встроенный блок;). Поддержка IE 6,7 была прекращена Microsoft, и, чтобы полностью избавиться от этой чертовой штуки, она должна быть прекращена и для разработчиков (IMO). - person toad; 22.02.2016

arrow_upward
6
arrow_downward

Тег заголовка (h1-h6) является элементом уровня блока и, таким образом, заполняет ширину контейнера, в котором он находится. Изменение его на

display:inline

добавит фон только к ширине текста. Однако это вызовет другие проблемы (поскольку встроенные элементы не ведут себя как блочные элементы во многих других отношениях).

Альтернативой является установка ширины самого заголовка. Если вы хотите быть действительно хитрым, вы можете сделать это с помощью javascript, чтобы он вычислял его для каждого заголовка конкретно.

Вам придется немного поиграть и выяснить, что работает в вашей ситуации.

person Gabriel Hurley    schedule 21.07.2009

arrow_upward
4
arrow_downward

как уже упоминалось, display:inline-block; может быть вариантом, но работает не во всех браузерах. то, о чем я мог подумать прямо сейчас, это дать заголовкам float:left; и элементу, который следует за clear:left;

другой способ - не такой чистый - это добавить промежутки вокруг текста вашего заголовка и присвоить этому промежутку цвет фона:

<h1><span>your text</span></h1>

h1 span { background-color:#369; }
person knittl    schedule 21.07.2009

arrow_upward
3
arrow_downward

Если вы хотите, чтобы ваши hx h1, h2, h3 и т. д. имели то же самое, что и текст в нем, вы можете попробовать

h1 {
    display:table;
}

Он не нарушает коллапс полей, как display: inline-block или float: left.

См. фрагмент:

#page {
  background-color: #ededed;
  height: 300px;
}
h1 {
  display: table;
  background-color: #10c459;
  padding: 10px;
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
}
<div id="page">
  <h1>Hello world</h1>
</div>

person Sébastien Gicquel    schedule 03.11.2016

arrow_upward
1
arrow_downward

Мое решение состояло в том, чтобы поместить диапазон внутри h1 и вместо этого стилизовать диапазон.

person jasonc65    schedule 21.05.2011

arrow_upward
1
arrow_downward

Другой способ добавить цвет фона к элементу заголовка, ширина которого равна его тексту (без использования дополнительных элементов или свойств отображения), — использовать селектор первой строки CSS;

Пример:

h1:first-line { 
 background-color: yellow;
}
person tonesforchris    schedule 18.10.2016