Question

这是我第一次使用该服务，所以我会尝试具体。

我正在尝试为我的域创建一个土地页面，但是当我为顶级菜单放置徽标并添加另一个元素时，该元素不会尊重徽标的空间，并且它会保留在徽标的前面。标志。

这是我正在使用的CSS：

#header {
    width: 100%;
    padding: 5px 0;
    background: #b20000;
}
#header .hwrap {
    display: block;
    width: 980px;
    height: 40px;
    margin: 0 auto;
}
#header .menuLogo {
    display: block;
    width: 205px;
    height: 70px;
    background: url(menu_logo-70px.png);
    text-indent: -9999px;
    margin-bottom: -30px;
}

以下是我正在使用的HTML的摘录：

<body>
<div id="header">
<div class="hwrap"><a href="http://fhtgames.com/"><h1 class="menuLogo">fhtgames.com</h1></a>Random text</div>
</div>
</body>

相当简单。

编辑：我想要的是徽标溢出菜单栏，并在徽标右侧添加菜单选项，仍在.hwrap元素内。我将徽标与<h1>元素一起使用，并将图像作为背景放置，以避免图像被右键单击并保存。

但是当我尝试添加菜单和徽标链接时，我注意到 Google Chrome 会在页面上显示.hwrap元素的整个宽度的徽标链接，并添加任何其他内容，使徽标留在新元素后面。

以下是屏幕的链接：http://img.fhtcentral.com/stack/screen001.png

我正在使用HTML5重置样式表（找到here），我正在从Google服务器中提取最新的jQuery库。

我以前做了很多次，没有任何问题，所以我真的不知道我做错了什么。我很抱歉，如果这看起来完全是noobie问题，但我只是看不出错误。

谢谢你的时间。

编辑：问题已解决。答案就在下面。谢谢你们的elp：D

Answer 1

文本显示在徽标上方，因为您已将徽标图像设置为背景。所以html打算按照单词所说的那样将图像作为背景！

为避免这种情况，我猜您已将display: block设置为h1.menuLogo。正确的方式是显示：inline-block。

#header .menuLogo {
  display: inline-block;
  width: 205px;
  height: 70px;
  background: url(menu_logo-70px.png);
  text-indent: -9999px;
  margin-bottom: -30px;
}

您可以找到working fiddle right here。

其余的是关于利用边距和填充进行调整。

有关您的问题的更多信息，请参阅the difference of block/inline-block here。

如果您需要其他建议，请告诉我们！

最好的问候，玛丽安。

Answer 2

希望这对你有所帮助。

#header {
width: 100%;
padding: 5px 0;
background: #b20000;
overflow:hidden;
position:relative;
}

#header .hwrap {
display: block;
width: 980px;
margin: 0 auto;
color:#fff;
}

#header .menuLogo {
display: block;
width: 205px;
height: 70px;
background: url('http://jsfiddle.net/img/logo.png') no-repeat rgb(249, 153, 5);
text-indent: -9999px;
overflow: hidden;
line-height: 1;
margin: 0;
padding: 0;
}

JSFiddle Link

HTML：块元素在其他元素后面

2 个答案: