html - 在整个页面宽度上展开动态菜单

Question

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

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

任何想法如何解决这个问题？我想如果我将菜单变成表格，它会解决这个问题，但在这种情况下我不喜欢使用表格。

您可以在此处查看网站：在此处输入链接描述 谢谢。

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>

希望这可以帮助你:)

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