Question

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

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

我使用来自http://www.htmldog.com/articles/suckerfish/dropdowns/

的新的Suckerfish CSS下拉菜单创建了菜单

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

非常感谢

Answer 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 */
}

Answer 2

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

基本上你可以使用max-width或100％宽度处理菜单包装，并使你的菜单项和流畅的＃34;分割100个/菜单项。在这种情况下：5个菜单项，因此100/5 = li

的宽度为20％

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

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

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

            }

            getCountLi();


        })();

在div中拉伸CSS菜单

2 个答案: