css - 在菜单上均匀分布多个宽度不同的元素

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 ver 9.0 是不需要的，那么以下将是有用的:

1. flexbox 属性。
2. 2.ul { 显示:表格； } ul li { 显示:表格单元格；文本对齐:居中