html - 导航中心的大 Logo

Question

她给了我一个设计，中间有一个大标志(高度为 100px，6.250em)，而普通列表项的高度为 50px(3.125em)。现在我不知道该怎么做。

This is what I have

这将是最终结果:

那么，有人能帮帮我吗？

HTML

<div id="container">
    <nav>
        <ul>
            <li><a href="#" class="menu">home</a></li>
            <li><a href="#" class="menu">about</a></li>
            <li><a href="#" class="menu">fotoreportage</a></li>
            <li id="logo"><a href="#">navatushots</a></li>
            <li><a href="#" class="menu">portfolio</a></li>
            <li><a href="#" class="menu">voorwaarden</a></li>
            <li><a href="#" class="menu">contact</a></li>
        </ul>
    </nav>
</div>

CSS:

body{
    background-color:#c3c3c3;
}

nav{
    width:100%;

    list-style:none;
    text-align:center;

    background-color:#fff;
}

nav li{
    display: inline-block;
}

nav li a{
    height:3.125em;
    line-height:50px;   

    text-decoration:none;
    color:#000; 
}

nav li#logo{
    height:100px;
    line-height:6.250em;    
    background-color:#595450;
    color:#fff;
}

Answer 1

只是为了让您重新思考您的标记，这里有一种更语义化的解决方案:http://jsfiddle.net/Qh3X5/

<h1 title="NavatuShots">NavatuShots</h1>
<nav>
    <ul>
        <li><a href="#">home</a></li>
        <li><a href="#">about</a></li>
        <li class="mid-left"><a href="#">fotoreportage</a></li>
        <li class="mid-right"><a href="#">portfolio</a></li>
        <li><a href="#">voorwarden</a></li>
        <li><a href="#">contact</a></li>
    </ul>
</nav>

Logo 现在包含在 H1 中，其中包含单词“NavatuShots”，但由于“文本缩进:-9999 像素；”而未显示，而是显示带有背景图像的 Logo 。还建议您将主页链接添加到 H1，因为人们可能会尝试点击它。

logo的定位是通过“position: absolute; left: 50%; top: 0;”来做的。然后将 Logo 宽度一半的负边距添加到 H1 元素，使其正确居中。

另一方面，ul 元素没有分开，我添加到辅助类中，它为中间的 li 元素提供了一些余量。

差不多就这些了。