Question

我的代码中有7个菜单。有时它可能是6个基于usertype。如果输入管理员它将是7.User可能只有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

假设所需的结果是上述菜单在一行中呈现，无论具体的项目数是多少 -

执行此操作的最佳方式是使用表格，因为它们具有此类事物的本机行为（占用较长的行并在其上均匀分配项目）。好消息是我们可以使用

轻松伪造这种行为

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

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

您还可以看到jsFiddle以及上述示例。

Answer 2

假设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;
}

Answer 3

使用display inline-block代替表格单元格：

#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/

如何调整水平菜单的大小？

3 个答案: