我有一个像这样的 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 的右侧,两者之间的所有内容都需要均匀分布。
你会怎么做?
最佳答案
您可以使用 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 发表了一篇文章,解释了如何实现最佳浏览器支持:
关于jquery - 具有动态间隔文本的菜单以覆盖整个宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27680782/