Question

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

CSS

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

由于HTML代码很长，请参阅jsFiddle以获取更多信息。

如何在不修复每列的绝对位置的情况下，将菜单排成一行（不更改为第二行）？虽然jQuery将用于网站的其他部分，但最好不要在布局上依赖JavaScript。

注意：请考虑跨浏览器兼容性。优先支持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%;    
}

在一行中排列多列菜单

2 个答案: