Настройка ширины: авто приводит к ширине: 100%

Question

Я немного устала (из-за кофе), поэтому не могу понять это.

Когда я устанавливаю p.style.width = auto (синий), почему его width равен 100% ? Ни один из элементов не имеет ширину, равную 100%, поэтому я сомневаюсь, что это наследуемое свойство.

Как настроить ширину <p> в соответствии с шириной содержимого плюс отступ?

Пример страницы ссылка

Answer 1

Поскольку width:auto по умолчанию равно 100% (то есть минус границы и отступы, см. здесь ), если вы не находитесь в с плавающей / позиционной среда. На самом деле, без

float:left

или

position: absolute

вам не повезло, устанавливая ширину элемента на минимум только в CSS. См., Например, здесь о том, как вы можете достичь этого в Firefox (только).

Редактировать: Вы также можете использовать

display: table;
width: auto;

но, с одной стороны, это также не поддерживается во всех браузерах, и тогда дизайн таблицы может принести вам множество других неприятностей.

Редактировать 2: Вы можете, как предложено DisgruntledGoat, также попробовать display:inline-block. На этой странице представлена ​​кросс-браузерная реализация, ориентированная на IE6 +, FF2 +, Safari 3+ и Opera.

Answer 2

Это все объясняется в спецификации

http://www.w3.org/TR/CSS2/visudet.html#blockwidth

o.o

По сути, авто означает, что, принимая во внимание все другие указанные отступы, границы и поля, заполните оставшееся пространство (при условии, что только ширина установлена ​​на авто). Таким образом, 100% минус границы, отступы и поля.

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

Answer 3

Остальные правы, width: auto устанавливает ширину, чтобы заполнить все доступное пространство.

Одним из решений будет использование display: inline-block, которое должно делать то, что вы хотите. Для совместимости с IE6 лучше всего применить это к встроенному элементу, например <span>. И добавьте display: -moz-inline-box для Firefox 2 и более ранних версий.