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

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

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

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

Ответы

Ответ 1

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

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

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

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

#rightcol {
   float:left;
   padding:70px 20px 20px 0px;
   width:585px;
}

Ответ 2

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

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

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

Ответ 3

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

display:inline

приведет фон к ширине текста. Это приведет к появлению других проблем (поскольку встроенные элементы не ведут себя как блок-элементы множеством других способов).

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

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

Ответ 4

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

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

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

h1 span { background-color:#369; }

Ответ 5

Если вы хотите, чтобы ваши 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>

Ответ 6

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

Пример:

h1:first-line { 
 background-color: yellow;
}

Ответ 7

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