html - 为什么带有滚动条的列表会将项目分成两行

Question

如果我有一个包含许多项目的无序列表，并且在此列表上设置了一个最大高度，并且ul设置为display: inline-block（或浮动）。然后滚动条似乎占据了列表“内部”的空间，迫使文本环绕。

我怎样才能避免这种情况？我不介意滚动条是否使列表更宽，我只希望列表占据其自然空间。

http://jsbin.com/AzeBuHU/2/edit?html,css,output

谢谢

Answer 1

在 CSS 中添加它。这将防止列表项换行，并为滚动条增加额外的空间。

li {
    padding-right:20px; 
    white-space:nowrap;
}

Answer 2

overflow-y: scroll;对于 UL 似乎是一个修复，但您每次都会有滚动条，即使对于 UL 高度较小的少数项目也是如此。

演示

Answer 3

不要给出 max-height，因为它现在需要更多的高度。你可以给，

高度：自动；

否则你可以试试

溢出：可见；

这将在数​​据更多时显示滚动条。