CSS水平菜单-等距?

不能设置内联元素的高度或宽度。 http://www.w3.org/TR/CSS2/visudet.html#inline-width

尝试 display:inline-block;

以下是IE的修复方法:

display:inline-block;
zoom:1;
*display:inline;

如果要让元素获得整个可用空间,则无需定义 先验的 菜单元素的宽度(当然,它有助于均匀地调整li元素的大小)。您可以通过处理 display 财产。

#menu{
  display: table;
  width: 100%;
}

#menu > ul {
  display: table-row;
  width: 100%;
}

#menu > ul >li {
  display: table-cell;
  width:1%
}

注意 width:1% 是必需的 以避免细胞崩溃。

如果您的菜单项是动态生成的(所以您不知道之前会有多少),那么您可以添加一个 style="width:xx" 属性 li S(或) <style> 在顶部…或者你想去哪里,真的)。在哪里? xx 应该由 width_of_parent_div_in_px/number_of_elements+'px' 或 100/number_of_elements+'%' . 这个 锂 S也应该 block -水平元素,以及 float 预计起飞时间 left .

#menu ul li {
    float: left;
    clear: none;
    display: inline;
    padding: 10px;
    height: 25px; //how tall you want them to be
    width: 18%; //you will need to set the width so that all the li's can fit on the same line.
}

宽度:18%可能是正确的,如果你有5个元素,占边界和填充。但是它会因你有多少元素,有多少填充物等而变化。

如果你愿意使用flexbox,那就不难了。我要发布的代码的全部学分将转到 CSS Tricks 因为这是他们的CSS。

下面是一个包含供应商前缀的示例。

#menu{
  
  list-style: none;
  
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around; 
  justify-content: space-around; 
  
 }

<ul id="menu">
  <li>Home</li>
  <li>Store</li>
  <li>Blog</li>
  <li>About</li>
  <li>Contact</li>
</ul>

与flexbox唯一的问题是,如果你需要支持IE9及以下,否则,我认为没有理由不使用flexbox。你可以 view browser support for Flexbox here .

以下是我的工作:

#menu{
    height:31px;
    width:930px;
    margin:0 auto;
    padding:3px 0px 0px 90px;
    color:#FFF;
    font-size:11px;
}
#menu ul{
    display:inline;
    width:930px;
    margin: 0 auto;
}
#menu ul li{
    list-style:none;
    padding:0px 0px 0px 0px;
    display:inline;
    float:left;
    width:155px;
}