1

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

3 回答 3

5

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

最好的方法是使用表格，因为它们对这种类型的事物具有本机行为（占用长线并将项目均匀地分布在其上）。好消息是我们可以很容易地使用

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

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

您还可以看到带有上述示例的jsFiddle 。

于 2013-05-21T15:56:14.517 回答
1

代替表格单元格使用显示内联块：

#menu { display: inline-block;background:#000; }
#menu ul { display: inline-block; margin:0;padding: 0; }
#menu ul li { display: inline-block; margin:0; padding: 0;}
#menu ul li a { display: inline-block; padding: 10px; color: #fff;}
#menu ul li a:hover { color: #ff0;}

在这里小提琴：http: //jsfiddle.net/BtvY9/

于 2013-05-21T16:00:38.243 回答
1

假设 hexblot 的答案不是您想要的，并且您想在容器元素的宽度上分配不同宽度的 LI，而 LI 不一定占据导航栏的全宽，然后使用以下命令：

http://jsfiddle.net/sxGMZ/

#menu ul {
    display: block;
    text-align: center;
    width: 100%;
    background: brown;
}

#menu ul li {
    display: inline-block;
    height: 30px;
    padding: 10px 12px 0 12px;
    background: #ccc;
}
于 2013-05-21T15:59:48.360 回答