0

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

CSS 编码：#menubar { width: 50%; 边距：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;
}

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

HTML 编码

4

1 回答 1

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>

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

在这里了解花车。

2.使用inline-block

您可以使用：

显示：内联块

在每个菜单按钮上，这将允许您在彼此旁边显示多个元素。

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

white-space: nowrap

在菜单容器上。

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

vertical-align: top

在每个元素上（top或middle或bottom，取决于您的需要）。

附加信息

您可以通过以下链接了解上述两种方法

于 2013-12-08T23:16:53.297 回答