html - 导航中心的大徽标

Question

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

这就是我所拥有的

这将是最终结果：

那么，任何人都可以帮助我吗？

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部分会容易得多。

小提琴链接

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，因为人们可能会尝试单击它。

标志的定位由“位置：绝对；左：50%；上：0；”。然后将徽标宽度的一半的负边距添加到 H1 元素，因此它正确居中。

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

差不多就是这样。

Answer 3

如果您希望在其位置显示徽标但不拉伸height其容器，也许这就是您正在寻找的：http: //jsfiddle.net/d92Ux/1/

- 编辑 -

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