显示大于导航栏的徽标的最佳实践答案

【问题标题】：Best Practice for displaying logo larger than navigation bar显示大于导航栏的徽标的最佳实践
【发布时间】：2013-04-03 19:01:11
【问题描述】：

我的问题是：

如果我想在导航栏左侧显示一个 100 x 100 像素的标志，但我的导航栏只有 50 像素的高度...我应该如何设计 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;}

有没有更好的方法来解决这个问题？（在灵活性或对未来修改的兼容性方面）

【问题讨论】：

标签： html css web navbar graphical-logo

【解决方案1】：

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

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

【讨论】：