jquery - 如何使 css jquery 自动调整导航？

Question

我想制作一个自动适应网站宽度的导航。我的菜单是动态的，所以如果添加菜单，菜单之间的间隙应该压缩并适合网站的宽度。 jquery 和 css 怎么可能。

我的html是这样的:

<div class="menu">
         <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact Us</a></li>
         </ul>
        </div>

通过 css 是:

.menu{
height:auto;
width:400px;
}

.menu ul{ width: 100%; list-style:none;}
.menu ul li{ list-style:none;}
.menu ul li a{ float:left; padding:10px 20px;
background-color:#cccccc;}
.menu ul li a:hover{ background-color:#eeeeee;}

如果我添加一个菜单，菜单就会下降。所以我希望我是否可以使填充动态化，以便在我添加新元素时它会收缩。

Answer 1

在顶级菜单元素上使用百分比宽度。