跨 div 拉伸 CSS 菜单答案

【问题标题】：stretching CSS menus across a div跨 div 拉伸 CSS 菜单
【发布时间】：2014-07-17 00:08:36
【问题描述】：

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

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

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

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

非常感谢

【问题讨论】：

您需要 javascript 来执行此操作，因为 css 无法判断菜单中有多少项。

标签： css

【解决方案1】：

如果此菜单中始终有 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 */
}

【讨论】：

菜单项并不总是 5
@vlrprbttst 这就是为什么我的（no-js）答案中有两个部分。
@zessx 这个数字是可变的，但是当我尝试你的 CSS 时，菜单项只是排在左边。我需要他们伸展，这样看起来居中。你知道我的意思吗？
您确定 #tbs_menu li 没有浮动吗？当我尝试时，有另一条规则覆盖了我的float: none。使用float: none !important快速检查它
@zessx 确实你是对的，我很抱歉。感谢您的解决方案！

【解决方案2】：

这是一个基本但有效的例子：http://jsfiddle.net/n8Jup/1/

基本上，您可以使用max-width 或 100% 宽度来处理菜单包装，并使您的菜单项“流动”划分 100 个/菜单项。在这种情况下：5 个菜单项，所以 100/5 = 20% 宽度到 li

如果您的菜单项是可变的，您需要一个 javascript 解决方案来计算您有多少菜单项并为 li 提供适当的宽度，如下所示：http://jsfiddle.net/n8Jup/2/

(function() {
            function getCountLi() {
            var count = $("li").size();

                $('li').css('width', (100 / count) + "%");

            }

            getCountLi();


        })();

【讨论】：

我也用 javascript 解决方案更新了我的答案！