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

Question

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

http://www.littlebirddesignstudios.com/

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

谢谢！

Answer 1

CSS定位

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

为导航容器position: relative提供固定高度，并根据需要提供导航元素position: absolute并设置left和top的值。

JSFiddle Demo

<强> 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;
    ...
}