html - CSS 标题图像 "Stacked"

Question

我的网站出现这个问题已经有一段时间了，所以我一直在使用图片制作标题，一切都很好，当我将鼠标悬停在它上面时它会改变图片，但在完成“主页”“新闻”之后““登录”“注册”和“联系”，我注意到它们不是彼此相邻，而是堆叠起来，如下所示:

CSS编码: ＃菜单栏 { 宽度:50%； margin :0 自动 0 自动；

.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

您的问题通常源于将多个 block 元素彼此相邻列出，未 float ，这导致它们彼此堆叠(而不是彼此相邻)。

有多种可能的方法可以实现您想要实现的目标。这是其中两个:

<强>1。使元素彼此相邻 float

您可以通过将以下属性应用于您的 CSS 定义来使元素 float :

float: left;

而 left也可以是right或 none .

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

尝试添加 float: left到您所有的 CSS 定义(.news、.register 等)。

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

.floatLeft {
    float: left;
}

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

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

但是，由于您使用 <a>元素，你可能想让它们成为 block 元素，所以应用:

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

会有帮助。

通常我建议您使用 <ul>菜单容器的元素和 <li>菜单按钮的元素。您仍然可以使用 <a> <li> 中的元素标签。

请注意，您的父容器必须留出足够的宽度以将其子元素并排列出，否则 float 元素将换行到下一个“行”。

Learn about floats here .

<强>2。使用 inline-block

您可以使用:

显示:内联 block

在每个菜单按钮上，这将允许您并排显示多个元素。

如果您使用这种方法，请记住您可能需要设置:

white-space: nowrap

在菜单容器上。

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

vertical-align: top

在每个元素上( top 或 middle 或 bottom ，具体取决于您的需要)。

附加信息

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