拉伸橫跨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菜單

回答

相關問題