1

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

例如：

导航菜单内将有 4 个按钮；每个按钮都有 a'min-width:25px'和 amax-'width:100px'取决于其中的文本。

因此，如果所有 4 个按钮中的文本数量相同并且都等于50px，则包含其中所有按钮的导航菜单 DIV 应自动调整为200px。如果我再添加一个宽度为 的第 5 个按钮，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-->

我的 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;
}
4

2 回答 2

1

在这里可以使用表格布局样式。具有 will flex 的元素display:table以适应其子元素table-cells。

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

请参阅我的示例 JSFiddle

于 2013-11-09T10:18:32.873 回答
0

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

我已经制作了width外部 div100%和li's 是25%这样它们都可以适合

于 2013-11-09T09:31:18.520 回答