根据html中的宽度排列菜单项

Question

我想知道更好的方法来安排下面菜单的列表项。 如果我提到列表项为Item1，tem2，Item3等等，因为Item是一个小字，它占用的空间更少，所有宽度看起来都很好，如下所示：

但是，如果我把名称作为“功能”，支持“，”它是如何工作的？“那么它没有正确安排它们，因为它显示了每个列表项之间的大量空间n。 那么有没有更好的方法摆脱这个，如扩展菜单的宽度或类似的东西

这是菜单的css：

.menu
{
    background-image: url('../images/header.png');
    background-repeat: no-repeat;
}


ul.menu { 
    display:block;
    margin:0; 
    padding:0;
    height:60px;
    text-align:right;
}

ul.menu li {
    display:inline-block;
    width:50px;
    height:30px;
    margin-right:10px;

}      

ul.menu li:first-child {
    float:left;   
    margin-left:10px;
}

ul.menu li a
{
    text-decoration: none;
    padding: 15px 0;
    width: 50%;
    color: #eee;
    float: left;
    text-align: center;
    font-weight: bold;
    font-style: normal;
    font-family: Verdana;
}

这是我的标记：

 <div class="menu">
        <ul class="menu">
            <li><a href ="#">Home</a></li>
            <li><a href ="#">Features</a></li>
            <li><a href ="#">Support</a></li>
            <li><a href ="#">Blog</a></li>
            <li><a href ="#">How it work's</a></li>
        </ul>
  </div>

实际上根据Derek的回答如果我将宽度改为100px那么它会以这种方式向我显示

Answer 1

width:50px;是您的问题。

您可以删除它并：

1. 手动设置每个项目或
2. 创建一个函数来测量其内容的宽度并相应地调整OR

3. 没有定义宽度

   <li style="width: 60px;"><a href="#">Blog</a></li>

   <li style="width: 130px;"><a href="#">How it work's</a></li>