灵活的水平导航，导航元素之间的距离相等

Question

这是我的问题： - 我需要做一个水平菜单 - 它需要灵活，所以没有设定宽度 - 第一个和最后一个元素必须与导航的开头和结尾对齐 - 导航元素可以是不同的宽度 - 元素之间的间隙必须相等（除了第一个元素之前没有间隙，最后一个元素之后没有间隙）

我目前的解决方案是这样的（在此处查看实际操作http://jsfiddle.net/wKjVq/）：

ul{
    -webkit-box-orient: horizontal;
    display: -webkit-box;
    width: 100%;
}

.empty {
    -webkit-box-flex: 1;
}
<ul>
    <li>Element 1</li>
    <li class="empty"></li>
    <li>El 2</li>
    <li class="empty"></li>
    <li>Element three</li>
    <li class="empty"></li>
    <li>Element 4</li>
</ul>

通过使用 box flex，空列表元素在“真实”导航元素之间产生了均匀的间隙。 我对这个解决方案的结果很满意，但对使用空 div 并不满意。

所以我的第一个问题是：我是否遗漏了一些非常明显的东西？ 我的第二个问题是：还有其他人有任何其他解决方案吗（最好在 css 2 中，但 css3 很好，只要有一个很好的后备）？

Answer 1

如果添加box-pack: justify，则可以删除空的divs：

ul {
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    box-pack: justify;
}

见：http://jsfiddle.net/thirtydot/wKjVq/3/