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

原文 标签 javascript jquery html css

我的代码中有 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%'); 
    }
});
    }
});

最佳答案

假设所需的结果是将上述菜单呈现在一行中,无论元素的确切数量如何 -

最好的方法是使用表格,因为它们对这种类型的事物具有 native 行为(占用长线并在其上均匀分布元素)。好消息是我们可以很容易地使用

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

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

您还可以看到 jsFiddle以上述为例。

关于javascript - 如何根据其 li 调整水平菜单的大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16674225/

相关文章:

javascript - 模态弹出窗口打开时背景屏幕变暗

javascript - 外部javascript无法与onsen框架一起使用

jquery - IE8 切换错误?

javascript - js变量范围问题

php - 当放置在HTML中时,PHP脚本在浏览器中引发垃圾

javascript - 使用书签将代码添加到<body>标签

javascript - 向对象分配/取消分配类

javascript - 如何仅获取纯文本(字符串)作为Ajax url的响应?

jquery - 如何在加载数据时添加加载指示器

javascript - 查看div是否包含一个或多个输入的单词(JavaScript)