CSS Stretch Container to Width of Widest Hidden Child Element

Question

У меня очень простой пример неупорядоченного списка с черной рамкой, а один из его дочерних элементов скрыт: http://jsfiddle.net/spryno724/Sm9Lx/1/. Обратите внимание, что скрытый дочерний элемент значительно шире видимого элемента, но контейнер только масштабируется до ширины видимого дочернего элемента.

Есть ли способ в CSS, чтобы автоматически масштабировать ширину этого контейнера до ширины его самого широкого дочернего элемента, даже если этот элемент скрыт?

Я знаю, что это возможно с помощью JavaScript, но я хотел бы избежать взлома скриптов и, если это возможно, перейти к прямому CSS.

Кроме того, я хотел бы избежать установки определенной ширины, потому что в моем фактическом приложении мой контейнер будет содержать визуальные объекты неизвестной ширины.

Спасибо за ваше время.

Answer 1

использование visibility: hidden;, а не display: none; на скрытой li

• visibility: hidden; сохраняет элементы пространства

• display: none; действует как если элемент оленьей кожи существовать в разметке

Answer 2

Вместо display: none Вы можете использовать opacity: 0

Answer 3

Как насчет:

<li style="visibility: hidden; height: 0;">This is not the first list element, ok?</li>