css - 如何在流体网站中固定菜单？

Question

http://www.eco1furniture.ca/

向下调整页面大小时，主菜单转到第二行。我知道这应该发生在网站流动的情况下。但是有没有办法让它固定（在一条线上）？

谢谢，肯

Answer 1

您可以进行一些更改以确保菜单在“正常”条件下不会换行成两行，但我认为您无法确定它不会发生。例如，菜单宽度将取决于浏览器缩放级别、字体和字体大小。

使用我的浏览器默认设置，你的菜单是 865px 宽。考虑到排水沟，小屏幕样式表的最大宽度应该是 972px，所以下拉菜单出现在菜单进入两行之前。975px 是考虑不同浏览器的一些特性的合理值，但它仍然假设用户处于 100% 缩放，并使用您指定的字体和字体大小。

responsive.css - 第 51 行

@media only screen and (max-width: 975px) {

在菜单本身上设置最小宽度也会遇到同样的问题，并且正如您所发现的那样，会导致菜单超出主包装。