导航中心的大徽标

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

正如@DaveRook在评论中建议的那样，使用单独的ul-li部分会更容易。

Fiddle link

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>
        </ul>
        <ul>
            <li id="logo"><a href="#">navatushots</a>

            </li>
        </ul>
        <ul>
            <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 ul, 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 2

为了让您对标记进行一些重新思考，这是一种更为语义的解决方案：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>

徽标现在包含在H1中，其中包含单词“NavatuShots”，但由于“text-indent：-9999px;”而未显示，而您的徽标显示为背景图像。还建议您将主页链接添加到H1，因为人们可能会尝试单击它。

徽标的定位由“position：absolute; left：50％; top：0;”组成。然后，徽标宽度的一半的负边距被添加到H1元素，因此它正确居中。

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

这就是它。

Answer 3

如果您希望在其位置显示徽标但不伸展其容器的height，可能这就是您要寻找的内容：http://jsfiddle.net/d92Ux/1/

<强> - 编辑 -

更新了演示：http://jsfiddle.net/d92Ux/4/