css h1 - широкий лише текст

Question 1

У мене є стиль H1 для мого сайту:

.centercol h1 {
    color: #006bb6;
    font-weight: normal;
    font-size: 18px;
    padding:3px 3px 3px 6px;
    border-left:3px solid #c6c1b8;
    background:#f2efe9;
    display:block;
}

Колір фону охоплює всю ширину центрального колеса, 500 пікселів ...

Як зробити так, щоб цей H1 охоплював лише ширину тексту H1?

Question 2

Ви можете використовувати значення вбудованого блоку для відображення, однак у цьому випадку ви втратите функцію блоку h1, тобто брати та сестри відображатимуться в рядку з h1, якщо вони є вбудованими елементами (у цьому випадку ви можете використовувати розрив рядка
).

display:inline-block;

Question 3

.h1 {
  width: -moz-fit-content;
  width: fit-content;

  // workaround for IE11
  display: table;
}

Це підтримують усі сучасні браузери width: fit-content.

Для IE11 ми могли б наслідувати цю поведінку, display: tableяка не порушує колапс полів, як display: inline-blockабо float: left.

Question 4

Ви можете використовувати, display:inline-blockщоб змусити таку поведінку

Question 5

Легким виправленням цього є плавання вашого елемента H1 ліворуч:

.centercol h1{
    background: #F2EFE9;
    border-left: 3px solid #C6C1B8;
    color: #006BB6;
    display: block;
    float: left;
    font-weight: normal;
    font-size: 18px;
    padding: 3px 3px 3px 6px;
}

Я зібрав простий приклад jsfiddle, який показує вплив стилю "float: left" на ширину вашого елемента H1 для тих, хто шукає більш загальну відповідь:

http://jsfiddle.net/zmEBt/1/

Question 6

Це тому, що ваша <h1> - це ширина центрального колеса. Вкажіть ширину на <h1>і використовуйте, margin: 0 auto;якщо ви хочете, щоб вона була по центру.

Або, як варіант, ви можете плавати <h1>, що зробить його лише таким широким, як текст.

Question 7

Нещодавно я вирішив цю проблему за допомогою табличного підпису, хоча я не можу сказати, чи рекомендується це. Інші відповіді в моєму випадку не здавались тренувальними.

h1 {
  display: table-caption;
}

Question 8

Приблизно як інші пропозиції, ви можете використовувати наступний код. Однак, якщо ви все-таки виберете маржу: 0 auto; маршрут Я б рекомендував, щоб поля для верхньої та нижньої частини H1 були встановлені на щось інше, ніж 0. Отже, можливо, поля: 6px auto; або щось.

.centercol h1{
    display: inline-block;
    color: #006bb6;
    font-weight: normal;
    font-size: 18px;
    padding:3px 3px 3px 6px;
    border-left:3px solid #c6c1b8;
    background:#f2efe9;
    display:block;
}

Question 9

align-self-start, align-self-center ... у flexbox

.centercol h1{
    background: #F2EFE9;
    border-left: 3px solid #C6C1B8;
    color: #006BB6;
    display: block;
    align-self: center;
    font-weight: normal;
    font-size: 18px;
    padding: 3px 3px 3px 6px;
}

Question 10

Ви можете використовувати <span>замість <h1>.