如何使ul扩展过父DIV？

Question

我有一个容器div设置了宽度和高度，溢出设置为自动。在内部，有一个无序列表，其中包含导致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;
}

这里有一把小提琴说明了问题。

Answer 1

只需删除空白：nowrap；

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

链接

Answer 2

只需将float:left添加到ul菜单元素中。

如果在.container中浮动UL,则该项将不再扩展到父项的宽度。

在这里试试

您也可以通过添加:display:inline-block来实现这一点，而不是浮动它。