Html 收缩容器以仅容纳可见的项目

是否有一个纯粹的基于CSS的解决方案来缩小容器（在本例中为UL）以仅容纳可见（而不是溢出）项

右边的输出是我想要的（通过将溢出项设置为

display:none

实现）：

.container{
背景：黄色；
高度：50px；
宽度：240px；
文本对齐：居中；
浮动：左；
左边距：50像素；
}
.包装纸{
显示：内联块；
背景：红色；
}
傅先生{
显示：表格单元格；
垂直对齐：顶部；
}
保险商实验室{
显示：表格单元格；
高度：50px；
保证金：0；
填充：0；
背景：绿色；
}
李{
列表样式：无；
宽度：50px；
高度：50px；
边框：1px纯白；
浮动：左；
右边距：5px；
背景：蓝色；
}

福






福

将

溢出：隐藏
添加到
.container


.container{
背景：黄色；
高度：50px；
宽度：240px；
文本对齐：居中；
浮动：左；
左边距：50像素；
溢出：隐藏；/*新建*/
}
.包装纸{
显示：内联块；
背景：红色；
}
傅先生{
显示：表格单元格；
垂直对齐：顶部；
}
保险商实验室{
显示：表格单元格；
高度：50px；
保证金：0；
填充：0；
背景：绿色；
}
李{
列表样式：无；
宽度：50px；
高度：50px；
边框：1px纯白；
浮动：左；
右边距：5px；
背景：蓝色；
}







福
可能是空白+显示？您需要确定溢出内容的构成。在一定数量的
li
元素或特定宽度等之后？编辑：没关系，我没有看到您在容器元素上设置了
宽度。是的
空白：nowrap
可以。您是希望它们根本不被看到，还是应该滚动容器以便查看它们？可见性不是问题。我希望UL只缩小到可见项（而不是溢出项）。正如您在代码笔右侧看到的，UL只占据了3个列表项的宽度。我想在不设置display的情况下实现同样的效果：none将溢出项目。谢谢。但是，虽然它会导致溢出列表项隐藏，但它不会将UL容器仅收缩为可见项。@dytrivedi，remove
display:table cell