Question

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

我目前的解决方案是这样的（请参阅此处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：

，则可以删除空的div

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

请参阅： http://jsfiddle.net/thirtydot/wKjVq/3/

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

1 个答案: