Css 自动调整导航菜单

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

例如：

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

/* 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;
}

导航菜单内有4个按钮；每个按钮都有一个

最小宽度：25px'

和一个

最大宽度：100px'

，具体取决于其中的文本

因此，如果所有4个按钮内的文本量相同，且均等于

50px

，则包含其中所有按钮的导航菜单DIV应自动调整为

200px

。如果我随后添加宽度为

65px

的第五个按钮，导航菜单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-->

/* 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;
}

这一次和下一次用小提琴演奏这么多代码怎么样

我已经把外层的

宽度
做成了
100%
，而
li
的宽度是
25%
，所以它们都可以放进去这样怎么样？下次一定要用小提琴演奏这么多的代码

我已经将外部div的
宽度
设置为
100%
，而
li
的宽度为
25%
，因此它们都可以使用表布局样式进行调整。具有显示：table
的元素将根据其子元素
table cell
s进行调整

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

请参见我的
，在这里使用表格布局样式是可行的。具有显示：table
的元素将根据其子元素
table cell
s进行调整

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

请参见我的
我建议删除每个选项后的空格；在一行CSS中获得这种效果要容易得多，而不是记住在每个选项后都包含它；在一行CSS中获得这种效果要容易得多，而不是记住在每个选项后都包含它。这假设总是有4个菜单项，但OP说明菜单应该能够添加第5个按钮。@moob你说得对，先生，我忽略了这一点。。显示表格单元的概念是正确的：）这并不是我所需要的，但它仍然很有用。谢谢。这假设总是有4个菜单项，但操作说明菜单应该可以添加第5个按钮。@moob你说得对，先生，我忽略了这一点。。显示表格单元的概念是正确的：）这并不是我所需要的，但它仍然很有用。非常感谢。