我的问题是:
如果我想在导航栏左侧显示一个 100px x 100px 的 Logo ,但我的导航栏只有 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;}
有没有更好的方法来实现这个技巧? (在灵 active 或对 future 修改的兼容性方面)
最佳答案
您有几个选择 - 将 Logo 设置为 position: absolute
并将其放置在您需要的位置,这样它就不会受限于其父级的高度。
或者你可以尝试给它负边距并确保标题的overflow
不是hidden
关于html - 显示大于导航栏的 Logo 的最佳实践,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15795782/