爲什麼我的菜單不對齊？

Question

我想在HTML/CSS創建工具條內的以下菜單：

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

每個按鈕都有自己相應的壓力/非壓迫圖像，並徘徊在其不透明度從0.8移動通過CSS的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：出現這種情況有鉻，有IE比如我得到它正確地顯示

Answer 1

您正在使用清除屬性不正確。你可以使用這段代碼。

<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>​ 

，並刪除清除：從下面的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

Answer 2

的margin-top：..或填充頂部，但即使是更好的解決方案是，做以下修改，

添加一個新的，像這樣做

<div id="upper">//further divide it in two parts 
    <div id="homepageBtn"></div>//here goes homepage button 
    <div id="progressiBtn"></div> 
    </div > //end of upper 

，做同樣的事情底部股利

<div id="bottom">//further divide it in two parts 
    <div id="friendzoneBtn"></div> 
    <div id="emailBtn"></div> 
    </div > // end of bottom 

而不是你設置的任何尺寸upper格或底部div你的內容將很容易調整那裏