javascript - 如何根据其 li 调整水平菜单的大小？

Question

我的代码中有 7 个菜单。有时它可能是 6 个，具体取决于用户类型。如果输入管理员，它将是 7 个。用户可能只有 6 个菜单。 如何动态调整菜单大小。 为此，我使用了代码

<div id="menu">
<ul>
<li><a href="#">home1</a></li>
<li><a href="#">home2</a></li>
<li><a href="#">home3</a></li>
<li><a href="#">home4</a></li>
<li><a href="#">home5</a></li>
<li><a href="#">home6</a></li>
<li><a href="#">home7</a></li>
</ul>
</div>

我如何使用 jquery 做到这一点？

编辑

$(document).ready(function() {
    if ( $('#menu ul li').length > 6 ) {
        $('#menu ul li').css('width','14.5%'); 
    }
    else
    {
        $('#menu ul li').css('width','16.6%'); 
    }
});
    }
});

Answer 1

假设期望的结果是将上述菜单呈现在一行中，而不管元素的确切数量 -

做到这一点的最佳方式是使用表格，因为它们具有针对此类事物的 native 行为(占据一长列并在其上均匀分布元素)。好处是我们可以使用

轻松伪造该行为

#menu { display: table; width: 100%; }
#menu ul { display: table-row; }
#menu ul li { display: table-cell; }

这将自动分发您的 <li> s 在一条长线上，使用容器宽度。

您还可以看到 jsFiddle上面的例子。