jquery - 具有动态间隔文本的菜单以覆盖整个宽度

Question

我有一个像这样的 div:

<div class="menu">
 <a href="#">Home</a>
 <a href="#">Products</a>
 <a href="#">Contact</a>
 <a href="#">About</a>
</div>

div 的宽度为 1500 像素(但可能会调整，因为这是响应式设计)。

我想要的是让 Home 完全对齐 div 的左侧，About 完全对齐 div 的右侧，两者之间的所有内容都需要均匀分布。

你会怎么做？

Answer 1

您可以使用 css3 调整内容来实现该目标:

.menu {
    display: -webkit-flex; /* Safari */
    -webkit-justify-content: space-between; /* Safari 6.1+ */
    display: flex;
    justify-content: space-between;
}

http://jsfiddle.net/pn1f3hrq/2/

但您应该考虑浏览器支持。

css-tricks 发表了一篇文章，解释了如何实现最佳浏览器支持:

http://css-tricks.com/almanac/properties/j/justify-content/