Ширина заголовков (H1, H2 и т. Д.) - PullRequest
Новая
       32

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

21 голосов
/ 21 июля 2009

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

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

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

Ответы [ 7 ]

45 голосов
/ 21 июля 2009

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

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

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

15 голосов
/ 21 июля 2009

Я бы использовал 

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

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

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

#rightcol {
   float:left;
   padding:70px 20px 20px 0px;
   width:585px;
}
4 голосов
/ 21 июля 2009

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

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

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

h1 span { background-color:#369; }
4 голосов
/ 21 июля 2009

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

display:inline

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

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

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

3 голосов
/ 03 ноября 2016

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

h1 {
    display:table;
}

Это не такt сломать запас полей, как 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>
1 голос
/ 18 октября 2016

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

Пример: 

h1:first-line { 
 background-color: yellow;
}
1 голос
/ 21 мая 2011

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

...