宽度自动的内联块元素不会更新答案

【问题标题】：Inline Block element with width auto doesn't update宽度自动的内联块元素不会更新
【发布时间】：2013-04-07 23:59:29
【问题描述】：

我在使用

的内联块元素时遇到问题

width: auto;

并使用 javascript 以编程方式更改高度。

这是一个演示它的 jsFiddle；

这个想法是，如果您调整窗口大小，javascript 会设置元素的高度，而 inline-block 元素的宽度会自动调整以适应内容。

但是，宽度不会自动更新，它会保持原始宽度，而不是调整大小以匹配内容的宽度。

如果您通过隐藏和显示元素或更改显示样式等来导致 dom 刷新。宽度已更新！

请看这个修改过的jsfiddle；

这个在 chrome 上，现在强制宽度：自动；开始工作，在 Firefox 上它似乎仍然没有更新。

这样设置时宽度不会更新有什么原因吗？

问候，

【问题讨论】：

您希望将其设置为什么宽度？内联块元素缩小到其子元素的大小。
如果您的元素数量是固定的，您可以将根据元素数量计算的百分比分配给width。比如你有4个元素，然后设置width: 25%;，元素会自动更新宽度。
我希望宽度与 li 内 100% 高度图像的宽度相匹配。出于某种原因，如果您刷新显示样式，它会重新调整 li 的大小以匹配内部图像的宽度。我不想以编程方式将宽度设置为 width:auto;大小应该适合孩子们。

【解决方案1】：

您可以通过获取子元素的宽度，将元素的宽度与高度一起设置为width:auto 所期望的值：

$('#myul li').css('width',$('#myul li').children().width() + 2); // compensate for border

【讨论】：