拉伸横跨div的CSS菜单

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

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

我创建使用口鱼CSS下拉菜单的新的子菜单，从http://www.htmldog.com/articles/suckerfish/dropdowns/

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

非常感谢

来源

2014-07-16 marcnyc

您需要javascript才能做到这一点，因为css无法知道菜单中有多少项目。 – Guy

如果你总是在这个菜单中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 */ 
}

来源

2014-07-16 16:06:00 zessx

菜单项不总是5 – valerio0999

@vlrprbttst这就是为什么我的（非JS）答案中有两个部分。 – zessx

@zessx数字是可变的，但当我尝试你的CSS菜单项简单地排队到左边。我需要他们伸展，让看起来集中。你懂我的意思吗？ – marcnyc

这是一个简单而有效的例子：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(); 


     })();

来源

2014-07-16 16:02:34 valerio0999

我用JavaScript解决方案更新了我的答案！ – valerio0999

拉伸横跨div的CSS菜单

回答

相关问题