按照HTML中的宽度排列菜单项

我想知道更好的方式来安排下面菜单的列表项。好像我提列表项目项目1，TEM2，项目3等作为该项目是一个小的字占据全部都看在宽度细更小的空间，如下图所示：按照HTML中的宽度排列菜单项

enter image description here 但是，如果我走名称为“功能”，“支持”，“它是如何工作的”，然后它没有正确地安排它们，因为它显示了每个列表项之间的很多空间n0所以有没有更好的方法来摆脱这种情况，比如通过它扩大菜单的宽度或类似的

enter image description here

的东西这是我的菜单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>

其实按照德里克的答案。如果我改变了我的宽度为100px那么就说明我这样

enter image description here

来源

2012-01-09 coder

width:50px;是你的问题。

你可以删除它，：

手动设置每个项目或
创建一个函数来测量宽度的它的内容，并相应地调整或
让他们没有定义的宽度

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

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

来源

2012-01-09 18:18:12 Derek

@ Derek-Fist感谢您的回复，并根据您的回答，如果我改变了，那么它显示了我在问题中更新的方式。因为它给了我很多在每个列表项之间无用的空间。 – coder 2012-01-09 18:23:10

@Derek-最后找到了你所建议的正确方法，而不必提及其工作良好的宽度。 – coder 2012-01-09 18:38:23

很高兴你有它的工作。下次您发布问题时，您可能需要使用jsfiddle.net，它使我们能够轻松测试答案并为您提供更详细和高质量的答案。 – Derek 2012-01-09 18:54:36

按照HTML中的宽度排列菜单项

回答

相关问题