CSS 将容器拉伸到最宽的隐藏子元素的宽度答案

【问题标题】：CSS Stretch Container to Width of Widest Hidden Child ElementCSS 将容器拉伸到最宽的隐藏子元素的宽度
【发布时间】：2012-05-30 20:38:08
【问题描述】：

我有一个非常简单的例子，一个带有黑色边框的无序列表，它的子元素之一被隐藏：http://jsfiddle.net/spryno724/Sm9Lx/1/。请注意隐藏的子元素比可见元素宽得多，但容器仅缩放到可见子元素的宽度。

有没有办法在 CSS 中自动将此容器的宽度缩放为其最宽的子元素的宽度，即使该元素被隐藏？

我知道 JavaScript 可以做到这一点，但如果可能的话，我想避免脚本攻击，直接使用 CSS。

另外，我想避免设置特定宽度，因为在我的实际应用程序中，我的容器将包含未知宽度的视觉对象。

感谢您的宝贵时间。

【问题讨论】：

【解决方案1】：

在隐藏的li上使用visibility: hidden;而不是display: none;

【讨论】：

【解决方案2】：

怎么样：

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

【讨论】：

【解决方案3】：

你可以使用opacity: 0代替display: none

【讨论】：