html - 空白 : nowrap makes elements to be outside of window

Question

我正在尝试在 SPAN ( http://jsfiddle.net/Shg9L/24/ ) 的右侧添加一个 UL。

<div>
  <span>Categories</span>
  <ul>
    <li><a href="#">Book</a></li>
    <li><a href="#">Computer</a></li>
  </ul>
</div>

当窗口向下调整大小时，LI 应该堆叠但不在 SPAN 之下。

问题是当我调整窗口大小时，右侧的一些 LI 元素被隐藏。

我认为这是因为“white-space: nowrap”但没有它我无法让它工作。

这能解决吗？

Answer 1

将无序列表显示为 block 并 overflow hidden 。然后它将占用所有可用宽度。当没有足够的空间时，列表项将整齐地堆叠在无序列表的边缘:

div ul {
    list-style: none;   
    padding: 0;
    margin: 0;
    display: block;
    overflow:hidden;
}

white-space:nowrap在你的容器上<div>据我所知不需要。您可以将其删除。

JSFiddle