CSS 标题图像“堆叠”答案

【问题标题】：CSS Header Image "Stacked"CSS 标题图像“堆叠”
【发布时间】：2013-12-08 22:29:21
【问题描述】：

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

CSS 编码：＃菜单栏 { 宽度：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;
}

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

The HTML coding

【问题讨论】：

你能在jsFiddle中重现这个吗？
.home, .news, .register, .play, .contact { float: left; } 并在background-position 的号码旁边添加px。
@r3mus 我希望有一个简单的解决方案（：
我不能给你一个简单的解决方案，因为你没有提供所有的信息。我们无法重现您的问题，因此无法设计解决方案。
@ToontownFred 你看我的评论了吗？您的元素设置为display: block;，您必须将它们向左浮动或设置为display: inline-block;，否则它们会像现在一样堆叠。

标签： html css header background-position stacked

【解决方案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> 元素。您仍然可以在 <li> 标签中使用 <a> 元素。

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

Learn about floats here.

2。使用inline-block

你可以使用：

显示：内联块

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

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

white-space: nowrap

在菜单容器上。

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

vertical-align: top

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

其他信息

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

【讨论】：