跨div扩展CSS菜单

debugcn 发表于 Dev

马尼奇

我正在一个顶部具有水平菜单的网站上工作。这是示例页面：http : //workinprogress.pw/test.html

这是我的CSS工作表：http : //workinprogress.pw/test.css

我使用来自http://www.htmldog.com/articles/suckerfish/dropdowns/的新的Suckerfish CSS下拉菜单创建了菜单

我想做的是伸展菜单栏，以便单元格采用完全填充div容器所需的任何比例宽度。我想避免绝对定位或固定宽度，因为菜单项可以由用户更改，因此我需要菜单始终水平填充包含div的100％，而不管菜单项中出现的字词如何。

非常感谢

泽斯

如果您在此菜单中始终有5个项目，请添加以下CSS：

#tbs_horizontal_menus {
    width: 100%;            /* full-width menu */
}
#tbs_menu, #tbs_menu ul {
    padding: 0;             /* clean list padding */
}
#tbs_menu li {
    box-sizing: border-box; /* avoid width problem with border-width */
    width: 20%;             /* 5 x 20% = 100% */
}

如果此数字是可变的，请添加此CSS：

#tbs_horizontal_menus {
    width: 100%;            /* full-width menu */
}
#tbs_menu, #tbs_menu ul {
    display: table;         /* consider our list as a table */
    table-layout: fixed;    /* width fixed-equal-size columns */
    padding: 0;             /* clean list padding */
    margin-bottom: 0;       /* clean table margin */
}
#tbs_menu li {
    display: table-cell;    /* consider our elements as table cells */
    float: none;            /* make cells NOT floating */
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。