Question

我尝试使用简单的img标记在我的网站上的菜单上添加网站横幅，但每当我这样做时菜单就会重叠图像。我想要实现的是菜单被它上面的图像向下推，所以它就在它下面。

HTML：

<header>
<img src="site_logo.jpg" alt="">

<img src="banner_small.png" alt="" id="banner">
    <nav>
        <ul>
        <li class="selected"><a href="index.html">Main page</a>
        </li>
        <li><a href="classes.html">Classes</a>
        </li>
        <li><a href="gamemodes.html">Game modes</a>
        </li>
        <li><a href="contact.html">Contact</a>
        </li>
        </ul>
    </nav>
</header>

我的第一个img用于站点徽标，第二个用于菜单。我想将第一个img定位在网站顶部并按下菜单

CSS：

header {
  height: 50px;
  background: #333333;

}
header nav {
  display: inline-block;
  vertical-align: middle;
}
header nav ul {
  margin: 0;
  padding: 0;
}
#banner,
header ul li {
  display: inline-block;
  vertical-align: middle;
}
header nav > ul > li {
  box-sizing: border-box;
  height: 50px;
  padding: 12px;
  position: relative;
}

Answer 1

尝试将图像放在div元素中：

<div id='x'><img src="site_logo.jpg" alt=""></div>
<div id='y'><img src="banner_small.png" alt="" id="banner"></div>

然后，如果您想增加元素之间的间距，请使用Margin属性：

x{margin-bottom:...px;}
y{margin-top:...px; margin-bottom:..px;}

菜单和内容与标题中的图像重叠

1 个答案: