html - 显示徽标大于导航栏的最佳做法

我的问题是：

如果我想在导航栏的左侧显示100px x 100px的徽标，但是导航栏的高度只有50px ...我应该如何设计html结构和css规则？

现在，我使用：

<div id="header">
<div id="header-wrapper">
    <ul id="nav">
    <a id="logo" href="#" ></a>
    <li><a href="#"</a></li>
            <li><a href="#"</a></li>
            <li><a href="#"</a></li>
    <li><a href="#"</a></li>
    </ul><!-- #nav -->
</div><!-- #header-wrapper-->
</div><!-- #header -->

CSS代码为：

#header {
height: 50px;
position: relative;
border-bottom: 5px solid #e5dacd;
background: #1075bc;
margin-bottom: 60px;}

#header-wrapper {
margin: 0 auto;
width: 940px;}

#logo {
width:  100px;
height: 100px;
background: url(images/logo.png) no-repeat;
background-color: yellow;
display: inline-block;
*display: inline;
zoom: 1;}

#nav {
display: inline-block;
*display: inline;
zoom: 1;
vertical-align: top;
margin: 16px 0 0 0;}

有什么更好的方法可以解决这个问题吗？ （根据灵活性或与将来修改的兼容性）

最佳答案

您有几种选择-将徽标设置为position: absolute并将其放置在需要的位置，这样就不会将其限制在其父级的高度上。

或者，您可以尝试给它负的页边距，并确保页眉的overflow不是hidden

关于html - 显示徽标大于导航栏的最佳做法，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15795782/