html - 调整大小时使导航栏不 float 到下一行

Question

此处示例:http://rakavus.net/pvpguides/navbar.html

当将 web 浏览器的大小调整为小于 li 的长度时，它不应溢出到下一行并且不应提供任何溢出滚动条(滚动以查看整个内容的唯一方法应该是 web底部的页面滚动条。)

使用 overflow:hidden 不会产生预期的效果，因为它会在浏览器无法容纳整个内容时摆脱 li。 (要查看此内容，请将 overflow:hidden 添加到 li 中，然后将窗口的大小调整为比需要的稍大，然后慢慢将其变小。)

应该可以用inline-block来完成，但是我一直在尝试的方法似乎都没有得到想要的结果。

Answer 1

您需要为 ul 容器添加宽度。从您的容器中删除 float 和左规则并改为:

#centeredmenu ul {
  position : relative;
  width : 840px;
  margin : 0 auto;
  overflow: hidden;
}

#centeredmenu ul li {
 position : relative;
 float: left;
}

这是根据您的示例进行的编辑 http://jsfiddle.net/ETsR8/