Как мы можем сделать div взять ширину в соответствии с его содержанием автоматически

Question

Я хочу создать такой эффект, как fieldset и label.

Когда заголовки изменяются вдоль стороны, ширина, на которой белый фон заголовка остается неизменной.

Если я смогу заставить элемент heading или div иметь ширину, достаточную для его содержимого, он даст правильный эффект.

Если есть какое-либо другое решение, пожалуйста, дайте мне знать.

Answer 1

Вы можете использовать float в div, который хотите сжать, или display: inline-block (хотя это не сработает в IE6 (так как оно применяется inline-block только к элементам, встроенным по умолчанию) без указания ширины. Или очевидно, вы можете использовать и то и другое, хотя я не уверен, почему вы захотите сделать плавающий блок таким, как если бы он был inline.

Демо на jsbin

Answer 2

Я бы порекомендовал это

#element {
    display: table; /* IE8+ and all other modern browsers */
}