CSS标题图像“堆积”

Question

我在网站上遇到这个问题已经有一段时间了，所以我一直在使用图片处理标题，一切都很好，当我将鼠标悬停在它上面时会改变图片但是在完成“Home”之后“新闻” “”登录“”注册“和”联系“，我注意到，而不是一切都在彼此旁边，所有这些都堆积起来，如下所示：

CSS编码：     ＃菜单栏 {         宽度：50％;         margin：0 auto 0 auto;     }

.home {
    display: block;
    width: 240px;
    height: 100px;
    background: url('IMG/Heading_Normal_and_Hover.png');
    background-position: 0 0;
}
.home:hover {
    background-position: 0 100;
}
/***************************************************/
.news {
display: block;
    width: 240px;
height: 100px;
    background: url('IMG/Heading_Normal_and_Hover.png');
    background-position: -240 top;
}
.news:hover {
    background-position: -240 bottom;
} 
/***************************************************/
.register {
    display: block;
    width: 240px;
    height: 100px;
    background: url('IMG/Heading_Normal_and_Hover.png');
    background-position: 480 top ;
}
.register:hover {
    background-position: 480 bottom;
}

/***************************************************/
.play { /*login*/
    display: block;
    width: 240px;
    height: 100px;
    background: url('IMG/Heading_Normal_and_Hover.png');
    background-position: 720 top;
}
.play:hover {
    background-position: 720 bottom;
}

/***************************************************/
.contact {
    display: block;
    width: 240px;
    height: 100px;
    background: url('IMG/Heading_Normal_and_Hover.png');
    background-position: 240 top ;
}
.contact:hover {
    background-position: 240 bottom;
}

/***************************************************/

The HTML coding

Answer 1

你的问题通常源于将多个块元素列在彼此旁边，没有浮动，这导致它们堆叠在彼此之上（而不是彼此相邻）。

有许多可能的方法可以实现您想要实现的目标。以下是其中两个：

<强> 1。将元素浮动在彼此旁边

您可以通过将以下属性应用于CSS定义来浮动元素：

float: left;

left也可以是right或none。

如果您有一个正常排序的元素列表，并且希望它们彼此相邻float，则可以使用float:left。

尝试将float: left添加到所有CSS定义（.news，.register等）。

更简洁的方法是创建一个CSS类：

.floatLeft {
    float: left;
}

将该类应用于所有受影响的元素：

<a class="floatLeft" href=""></a>

但是，由于您使用<a>元素，您可能希望将它们作为块元素，因此应用：

.floatLeft {
    float: left;
    display: block;
}

可能会有帮助。

通常我建议您为菜单容器使用<ul>元素，为菜单按钮使用<li>元素。您仍然可以在<a>代码中使用<li>元素。

请注意，您的父容器必须允许足够的宽度来列出彼此相邻的子元素，否则浮动的元素将换行到下一个“行”。

Learn about floats here

<强> 2。使用inline-block

您可以使用：

display：inline-block

每个菜单按钮上的

，可以让您显示彼此相邻的多个元素。

如果您使用此方法，请记住您可能需要设置：

white-space: nowrap

在菜单容器上。

您可能还会遇到垂直对齐问题 - 在这种情况下使用：

vertical-align: top

每个元素（top或middle或bottom，具体取决于您的需求。

其他信息

You can learn about the above two methods by following this link