在整页宽度上传播动态菜单

Question

我有一个动态水平菜单。我试图使它始终100％的页面宽度。 因此，如果有6个或8个项目，或者如果我想更改每个项目的标题，我将无需再次调整每个项目的大小。

菜单buit为<ul> <li>Item 1</li> <li>Item 2</li> ... </ul>列表。请看看我希望如何呈现它（附图）。现在，在我的html中，项目在整个宽度之前结束。

任何想法如何解决这个问题？我想如果我将菜单转换成表格就可以解决这个问题，但在这种情况下我不想使用表格。

您可以在此处查看该网站：enter link description here 感谢。

Answer 1

确定。所以最后我找到了解决方案。仅CSS，不需要JS。 实际上很简单：

包裹<ul>应该有：

display: table

<li>本身应该有：

display: table-cell

并删除它的浮动。

这就是全部：）

Answer 2

如果您习惯使用名为jQuery的javascript框架，可以使用以下代码...

以jsfiddle为例：

http://jsfiddle.net/BDVTP/

如果你还没有（但看起来像你），你需要包含jquery

然后使用以下代码：

 <script type="javascript/text">
 $(document).ready(function(){
     var width = $('#access').width(); // width of the menu container
     var total = $('#menu-top-menu li').size(); //number of menu items
     $('#menu-top-menu').find('li').each(function(i){
         var border = parseInt($(this).css('border-left')); //border you have set
         $(this).width((width/total)-border); // calculate width and set it
     });​
 });
 </script>

希望这可以帮助你：）

请注意，如果项目首先不合适，这将 NOT 工作 - 它基本上会增加更多宽度。