Question

我想创建一个导航菜单，根据菜单中的内容（按钮）数量自动调整 width 。

例如：

导航菜单中将有4个按钮;每个按钮都有'min-width:25px'和max-'width:100px'，具体取决于其中的文字。

因此，如果所有4个按钮中的文本数量相同且均等于50px，则包含其中所有按钮的导航菜单DIV应自动调整为200px。如果我添加宽度为65px的第5个按钮，则导航菜单DIV应自动调整为265px。

问题

我的按钮有效（它们会根据文本的数量自动调整宽度），但是，我的导航菜单（导航键）不会自动调整。我不确定我做错了什么，但我猜这是一个简单的修复。

我的DIV和所有按钮的HTML：

   <div id="nav-top" >

    <ul class="top-nav">
     <li><a href="">Home </a></li>
     <li><a href="">About Us </a></li>
     <li><a href="">Apply </a></li>
     <li><a href="">Contact </a></li>
    </ul>

   </div><!--nav-top-->

我的CSS：

/* Holds all the buttons */
#nav-top {
    min-width:200px;
    max-width:900px;
    height:35px;
    position:relative;
    background-color:#555;
    top:7px;

}


.top-nav {
    list-style:none;
    padding:0px;
    margin:0px;
    text-align:left;

}


.top-nav a {
   display: block;
   background-color: #888;
   color: #000;
   text-decoration: none;
   min-width:25px;
   max-width:100px;
   float:left;
   padding:7px;

}

.top-nav a:hover
{
text-decoration: none;
color: #fff;
background-color: #000;
}

Answer 1

使用表格布局样式可以在这里工作。具有display:table的元素将展开以适合其子table-cell。

ul.top-nav{    
    display:table;
    max-width:900px;
    padding:0;
    margin:0;
}
ul.top-nav li {
   display: table-cell;
}

查看我的example JSFiddle

Answer 2

这个fiddle怎么样，下次总是使用小提琴这么多代码

我已经制作了外部div width的{{1}}而100%的{{1}}是li所以它们都适合

自动调整导航菜单

2 个答案: