如何使ul延伸超过父div？

Question

我有一个设置宽度和高度的容器div，溢出设置为auto。在里面，有一个无序列表，其中包含导致div滚动的内容。

问题是列表本身并没有超出容器div。因此，当我尝试在列表的右侧添加填充时，它无法正常工作：

CSS

.container {
    width: 200px;
    height: 400px;
    overflow: auto;
}

ul {
    list-style-type: none; 
    margin: 0;
    padding: 0 10px 0 0;
    white-space: nowrap;
}

这是一个显示问题的fiddle。

Answer 1

只需将ul添加到您的ul菜单元素。

如果您将.container隐藏在display: inline-block内，则该项目将不再扩展为父级的宽度。

试试here

您可以通过添加：fatal error来实现此目的，而不是将其浮动。

Answer 2

只需删除white-space: nowrap;

即可

ul {
    list-style-type: none; 
    margin: 0;
    padding: 0 10px 0 0;
    //Remove white-space
   // white-space: nowrap;
}

Link