在菜单上均匀分布多个不同宽度的项目

Question

我一直在努力寻找一个常见问题的解决方案，但由于我代码中的一些CSS规则，我无法使用我找到的任何解决方案。我有一个水平菜单(一个<ul> <li> <a>)，有不同的项目，不同的宽度，我不能分布菜单中的项目，所以它们之间有相同的空间。代码如下：

<nav id="main-menu">
     <ul class="child-menu">
         <li class="menu-1"><a>outsourcing tecnologico</a></li>
         <li class="menu-2"><a>seleccion de personal</a></li>
         <li class="menu-3"><a>solucion integral de nuevos profesionales</a></li>
         <li class="menu-4"><a>consultoria</a></li>
         <li class="menu-5"><a>formacion especializada</a></li>
         <li class="menu-6"><a>I+D+I<a></li>
    </ul>
</nav>

CSS：

#main-menu {
    background-color:#000;
    position:relative;
    margin:10px 0 0 0;
    width:980px;
    height:28px;
    float:left;
}

#main-menu ul {
width:980px;
margin:0;
}

#main-menu ul li {
float: left;
font-size: 12px;
text-transform: uppercase;
font-weight: bold;
}

#main-menu ul li a {
display:block;
color:#fff;
text-decoration:none;
line-height:27px;
height:28px;
text-align:center;
}

Answer 1

如果不需要低于ie版本9.0，则以下内容将非常有用：

1. Flex property.
2. 2.ul { display:table; } ul li { display:table-cell; text-align:center }

Answer 2

不要在li上使用float left，而是使用display inline-block和*display: inline hack for IE，使用zoom: 1；然后您可以在li上添加边距以保持间距不变。文本居中-在分配了宽度的父元素上居中对齐。

Answer 3

A部分解决方案

我有一个解决方案，这可能是一个好的开始：

#main-menu {
    background-color:#000;
    margin:10px 0 0 0;
    padding: 0;
    width:1080px;
    height:28px;
    float: left;
    overflow: auto;
    text-align: center;
}
.child-menu  {
    margin: 0;
    padding: 0;
    display: inline;
}
.child-menu li {
    display: inline;
    list-style: none;
    margin: 0 5px;
    padding: 0;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: bold;
}
.child-menu a {
    color:#fff;
    text-decoration:none;
}

一把小提琴：http://jsfiddle.net/audetwebdesign/Tp7wH/

一些设计问题和问题

如果你固定了main-menu的宽度，你会在最左边和最右边看到一些空格。

当我将宽度设置为980px时，链接被换成第二行。你需要考虑这一点。

我将ul和li元素显示为内联，但是如果您希望菜单具有更像按钮的外观，也可以使用内联块。