Я немного устал прямо сейчас (из кофе), поэтому я не могу понять это.
Когда я устанавливаю p.style.width = auto (синий), почему его width на 100%? Ни один из элементов не имеет ширины, равной 100%, поэтому я сомневаюсь, что она унаследовала свойство.
Как установить ширину <p> в соответствии с ее шириной содержимого и дополнением?
Пример страницы ссылка
Поскольку width:auto по умолчанию используется 100% (т.е. минус границы и paddings, см. здесь), если вы не находитесь в среде с плавающей/позиционной. Фактически, без
float:left
или
position: absolute
вам не повезло, установив ширину элемента как минимум в CSS. См., Например, здесь о том, как вы могли добиться этого в Firefox (только).
Изменить: Вы также можете использовать
display: table;
width: auto;
но, во-первых, это также не поддерживается во всех браузерах, а затем дизайн таблицы может привести к возникновению других неприятностей.
Изменить 2:. Вы можете, как было предложено DisgruntledGoat, также попробовать display:inline-block. Эта страница дает таргетинг на кросс-браузерную реализацию IE6 +, FF2 +, Safari 3+ и Opera.
Все это объясняется в спецификации
http://www.w3.org/TR/CSS2/visudet.html#blockwidth
o.o
По существу, автоматическое средство учитывает все другие заданные прокладки, границы и поля, заполняет оставшееся пространство (при условии, что только ширина установлена на автоматическую). Так эффективно 100% минус границы, отступы и поля.
Чтобы исправить, просто установите его в соответствие с другими элементами или вставьте все их в содержащий элемент с установленной шириной.
Другие правы, width: auto устанавливает ширину для заполнения всего доступного пространства.
Одним из решений было бы использовать display: inline-block, который должен делать то, что вы хотите. Для совместимости с IE6 лучше всего применить это к встроенному элементу типа <span>. И добавьте display: -moz-inline-box для Firefox 2 и ранее.