html - 在 1 行中排列多列菜单

Question

我有一个包含多列（jsFiddle）的菜单。我发现如果我继续添加更多列或调整浏览器的大小以减小宽度，菜单列将转到第二行。这是由于 CSS 属性float: left;。

CSS

#menus {
    border: 1px solid #F00;
}
#menus .menu {
    border: 1px solid #00F;
    float: left;
    min-width: 200px;
    height: 100%;
}

由于 HTML 代码很长，请参阅 jsFiddle 了解更多信息。

如何在不固定每列的绝对位置的情况下将菜单排列为 1 行（不更改为第 2 行）？最好不要在布局上依赖 JavaScript，尽管 jQuery 将用于网站的其他部分。

注意：请考虑跨浏览器兼容性。支持 IE 6 或以上版本为佳。

Answer 1

虽然它不是优化的解决方案，但您可以使用：

#menus {
    border: 1px solid #F00; white-space:nowrap;

}
#menus .menu {
    border: 1px solid #00F;
    /*float: left;*/ display:inline-block;
    min-width: 200px;
    height: 100%;
}

Answer 2

如果您想在一行中显示所有菜单，只需使用此 Css。

 #menus {
    border: 1px solid #F00;
    display: table;
    }
    #menus .menu {
    border: 1px solid #00F;
    display: table-cell;
    min-width: 200px;
    height: 100%;
    }

如果你想要全宽菜单，你可以使用

   #menus {
    border: 1px solid #F00;
    display:table;
    width:100%;
}
#menus .menu {
    border: 1px solid #00F;
    display:table-cell;
    min-width: 18%;
    height: 100%;    
}