css - 如何在 CSS 中处理水平不均匀的导航？

Question

我正在为朋友重做一个网站，我想知道进行水平不均匀导航的最佳做法是什么：

http://www.littlebirddesignstudios.com/

我的想法是只做 4 个不同高度的 div，但我想知道其他人将如何处理同样的问题。

谢谢！

Answer 1

CSS定位

通常我建议将元素浮动在水平导航栏中。但是在这种情况下，如果导航区域的高度是固定的并且内容不会改变，那么 CSS 定位可能是最合适的。这使您可以轻松控制导航元素的确切位置。

给 nav 容器position: relative和一个固定的高度，给 nav 元素并根据需要position: absolute设置 和 的值。lefttop

JSFiddle 演示

HTML

<ul class="nav">
    <li class="design"><a href="#">Design</a></li>
    <li class="services"><a href="#">Services</a></li>
    <li class="bio"><a href="#">Bio</a></li>
    <li class="contact"><a href="#">Contact</a></li>
</ul>

CSS

.nav {
    position: relative;
    height: 200px;
    ...
}
.nav li {
    position: absolute;
}
.nav li.design   {left: 20px;  top: 40px;}
.nav li.services {left: 160px; top: 50px;}
.nav li.bio      {left: 340px; top: 20px;}
.nav li.contact  {left: 450px; top: 60px;}

.nav li a {
    display: inline-block;
    font-size: 30px;
    line-height: 46px;
    ...
}