如何将div的大小限制为窗口尺寸？

Question

我有一个装有书签的菜单栏（div），当插入了太多书签时，这个菜单栏（div）对于首选页面大小（1280,720）变得太宽而变成了卷轴，留下了一半的书签。图。

我想确保所有书签都在视野中，最好的选择似乎是我必须在下一行显示额外的书签。有人可以指导我朝正确的方向或更好地提供工作样本。我只是学习使用jquery而且发现这很困难。

Example code in jsfiddle

Answer 1

你在ul元素上有这个。

white-space: nowrap;

这意味着该元素的内容永远不会换行到另一行，因此它会延伸到窗口边缘之外。删除该规则，您可以获得更接近您想要的内容。也就是说，当你的内容溢出一行时，你希望它 wrap 到下一行。

http://jsfiddle.net/y9a64/9/

Answer 2

http://jsfiddle.net/bH8yA/ 你在寻找这样的解决方案吗？如果是这样，那就是直接的CSS。

Answer 3

你可以通过使用css overflow-x：auto实现这一点;请参阅示例http://jsfiddle.net/Xa8yB/6/