更改菜單項的寬度動態

我有以下代碼：更改菜單項的寬度動態

<div class='menu'> 
    <div class='menu_1'> 
    <a href='../test.php'>JOBS</a> 
    </div> 
    <div class='menu_2'> 
    <a href='../test.php'>EMPLOYERS</a> 
    </div> 
    <div class='menu_3'> 
    <a href='../test.php'>MEMBERS</a> 
    </div> 
    <div class='menu_4'> 
    <a href='../test.php'>CONTRACTORS</a> 
    </div> 
    <div class='menu_5'> 
    <a href=../test.php'>REMINDERS</a> 
    </div> 
    <div class='menu_6'> 
    <a href='../test.php'>REPORTS</a> 
    </div> 
    </div>

我也有以下的Jquery，將動態尺寸基礎上，一個鏈接中有多少項目在菜單：

$('.menu a').css('width',100/$('.menu > div').size() + '%');

此代碼以我想要的方式工作，但我想知道是否有一種方法只使用CSS來完成此操作？

任何幫助，非常感謝。

來源

2011-12-13 mysticgohan53

你嘗試過了一個寬度設置爲自動和設置任何你想要整個大小的DIV菜單的寬度？ – Evan

是的，所有爲我做的就是把所有東西緊挨着放在一起。 – mysticgohan53

嘗試設置'width：auto;'，然後添加填充和邊距？ –

它看起來像你試圖以一種看起來不錯的方式在一條線上獲得所有鏈接。最簡單的方法是使用表格或現代瀏覽器，表格顯示類型。試試這個：

.menu { display: table-row; width: 100%; } 
.menu > div { display: table-cell; }

您可能需要與display: table周圍添加菜單額外股利。

這不會完全是jQuery的功能;文字較大的鏈接將佔用更多空間。只要表格拉伸算法工作正常，這可以說是更好的行爲。

來源

2011-12-13 16:32:07 meustrus

感謝您的幫助，我嘗試過，但它不適合我。 – mysticgohan53

將.menu設置爲顯示：inline-block（僅限IE8 +： - /）和a顯示：block;

http://jsfiddle.net/6XDwx/

來源

2011-12-13 16:33:16 ptriek

更改菜單項的寬度動態

回答

相關問題