具有等距离导航元素的灵活水平导航

Question

具有等距离导航元素的灵活水平导航

3

这是我的问题：

- 我需要制作一个水平菜单 - 它需要是灵活的，所以没有固定的宽度 - 第一个和最后一个元素必须对齐到导航的开始和结束位置 - 导航元素可以有不同的宽度 - 元素之间的间隔必须相等（除了第一个元素前面和最后一个元素后面没有间隔）

我目前的解决方案如下（在此处查看实现：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>

通过使用盒子弹性布局，空的列表元素可以在“真实”的导航元素之间产生均匀的间隔。我对这个解决方案的结果感到满意，但并不喜欢使用空的div。

所以我的第一个问题是：我是否漏掉了一些显而易见的东西？我的第二个问题是：是否有其他人有任何其他解决方案（最好是在css2中，但如果有很好的回退，那么css3也可以）？

- Erik Portin

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- thirtydot · Accepted Answer

如果你添加 box-pack: justify，那么你可以移除空的 div。

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

See: http://jsfiddle.net/thirtydot/wKjVq/3/