Html 导航中心的大徽标 她给了我一个设计，中间有一个大的标志（高度是100px，6250EM），而正常的列表项目是50px的高度（3.125EM）。现在我不知道怎么做

这将是最终的结果：

有人能帮我吗

HTML

---

如果您希望在其位置显示徽标，但不拉伸其容器的高度，可能这就是您要寻找的：

--编辑--

---

更新的演示：

正如@DaveRook在评论中建议的那样，使用单独的

ul li

部分会容易得多

HTML

---

为了让您重新思考一下标记，这里有一种更具语义的解决方案：

NavatuShots

徽标现在被包装在一个H1中，其中包含单词“NavatuShots”，但由于“文本缩进：-9999px；”而不会显示，而您的徽标显示为背景图像。还建议您将主页链接添加到H1，因为人们可能会尝试单击它

徽标的定位由“位置：绝对；左侧：50%；顶部：0；”确定。然后在H1元素中添加标志宽度一半的负边距，使其正确居中

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

---

差不多就是这样

它告诉我：由于其类别，访问此网站被It URL过滤策略阻止。然后，

Category:Disease Vector

。我将对此进行检查，同时，这里有一个屏幕截图：）我建议您将其复制到jsfiddle.net上，并共享该链接。好的，这对您有用吗？除了常规CSS之外，还有reset.CSS:）我知道你已经接受了答案，但是当你使用固定高度的图像时，你也可以这样做：是的，这就是我想要的。只有一个列表项落在“徽标”后面。我怎么能解决这个问题？我不太明白你为什么接受了一个与你所说的不符的答案。食梦者的回答甚至延伸到了容器的高度。顺便说一句，我编辑了我的答案并制作了一个新的JSFIDLE。非常感谢！但是，当我实现它时，字母“portfolio”落后于h1。。我怎样才能解决这个问题？

<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>

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

<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>

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

<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>