html - 为什么我的菜单没有对齐？

Question

我正在尝试在侧边栏内使用 HTML/CSS 创建以下菜单:

myimage http://img1.firenex.net/9Z0eupHnvV7LIPQd950r.png

每个按钮都有自己对应的按下/未按下图像，悬停时其不透明度通过 CSS 从 0.8 变为 1.0。

问题是我得到的是这样的:

myimage2 http://img1.firenex.net/nooUcfe0HvvfMaCmz6N8.png

不是我预期的结果:)

这是我的 HTML:

    <div id="homepageBtn"></div>
    <div id="progressiBtn"></div>
    <div id="interessiBtn"></div>
    <div id="friendzoneBtn"></div>
    <div id="emailBtn"></div>

这是我的 CSS:

#homepageBtn {
    background:url(img/buttons/homepage_btn.png) no-repeat;
    opacity: 0.8;
    width: 88px;
    height: 79px;
    margin-left: 30px;
    float: left;
}

#homepageBtn:hover {
    background:url(img/buttons/homepage_btn.png) no-repeat;
    opacity: 1.0;
}

#homepageBtn:active {
    background:url(img/buttons/homepage_btn_pressed.png) bottom right no-repeat;
}

#progressiBtn {
    background:url(img/buttons/progressi_btn.png) no-repeat;
    opacity: 0.8;
    width: 88px;
    height: 79px;
    margin-left: 10px;
    float: left;
}

#progressiBtn:hover {
    background:url(img/buttons/progressi_btn.png) no-repeat;
    opacity: 1.0;
}

#progressiBtn:active {
    background:url(img/buttons/progressi_btn_pressed.png) bottom right no-repeat;
}

#interessiBtn {
    background:url(img/buttons/interessi_btn.png) no-repeat;
    opacity: 0.8;
    width: 88px;
    height: 79px;
    margin-left: 30px;
    margin-top: 10px;
    clear: left;
    float: left;
}

#interessiBtn:hover {
    background:url(img/buttons/interessi_btn.png) no-repeat;
    opacity: 1.0;
}

#interessiBtn:active {
    background:url(img/buttons/interessi_btn_pressed.png) bottom right no-repeat;
}

#friendzoneBtn {
    background:url(img/buttons/friendzone_btn.png) no-repeat;
    opacity: 0.8;
    width: 88px;
    height: 79px;
    margin-left: 10px;
    margin-top: 10px;
    float: left;
}

#friendzoneBtn:hover {
    background:url(img/buttons/friendzone_btn.png) no-repeat;
    opacity: 1.0;
}

#friendzoneBtn:active {
    background:url(img/buttons/friendzone_btn_pressed.png) bottom right no-repeat;
}

#emailBtn {
    background:url(img/buttons/email_btn.png) no-repeat;
    opacity: 0.8;
    width: 188px;
    height: 29px;
    margin-left: 30px;
    margin-top: 10px;
    clear: left;
}

#emailBtn:hover {
    background:url(img/buttons/email_btn.png) no-repeat;
    opacity: 1.0;
}

#emailBtn:active {
    background:url(img/buttons/email_btn_pressed.png) bottom right no-repeat;
}

我真的不知道我是否使用了正确的方法来执行此操作，我将不胜感激此时的任何解决方案...提前致谢。

PS:Chrome 会发生这种情况，例如 IE，我可以正确显示

Answer 1

您错误地使用了 clear 属性。您可以使用此代码。

<div id="homepageBtn"></div>
<div id="progressiBtn"></div>
<div style="clear:both;border:0px"></div>
<div id="interessiBtn"></div>
<div id="friendzoneBtn"></div>
<div style="clear:both;border:0px"></div>
<div id="emailBtn"></div>​

并移除 Clear:left 之后的 CSS

#interessiBtn {
    background:url(img/buttons/interessi_btn.png) no-repeat;
    opacity: 0.8;
    width: 88px;
    height: 79px;
    margin-left: 30px;
    margin-top: 10px;
    clear: left;            <-- Remove this
    float: left;
}

Demo Code