2010-09-21 135 views
0

我試圖定位下列項目,但不能完全正確地進行。在h3的右側對齊圖像

她的是所期望的結果:

|布拉赫呸 (IMG)                                                     鏈接|

圖像與左側H3的右側對齊,鏈接位於最右側。所有的都在同一條線上。

<div style="float:left;"><h3>Blah Bah</h3></div> 
     <a href="#"><img src="image\edit.png" /></a> 
    <div style="float:right;">Link</div> 

<html> 
<style> 
    h3 
    { 
     color: #0066CC; 
     font-size: 130%; 
     font-weight: bolder; 
     padding-top: 0px; 
     margin: 0px; 
    } 
</style> 
<body> 
    <div style="float: left;"><h3>Blah Bah</h3></div> 
    &nbsp;<a href="#" style="padding-top: 25px;"><img src="go.gif" style="padding-top: 2px;" /></a> 
    <div style="float: right;">Link</div> 
</body> 
</html> 
+0

任何理由不只是把IMG的H3內如果這是你想要的結果? – Erik 2010-09-21 04:21:38

+0

您想要的結果是我用該代碼得到的結果。有什麼問題? – Robert 2010-09-21 04:23:03

+0

whopps.forgot使圖像成爲超鏈接的一部分。如果我將鏈接和圖像移動到H3中,則將鼠標懸停在圖像下方時會保留超鏈接線。 – Todd 2010-09-21 04:24:18

回答

3

默認情況下,H3標籤有邊距和下邊距,這就是爲什麼你的元素不是在同一行。

您可以通過添加以下樣式更改:

h3 { 
    margin: 0; 
} 

但更好的是,讓你知道被重置的所有元素使用重置樣式表。 http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

+0

這是票。當你發佈這個答案時,我會發布我混淆的內容。 – Todd 2010-09-21 05:08:00

0

我會跟你說實話,我已經讀過它的次handul,我還是無法破譯這句話,所以我不知道你想要什麼:

的圖像是與左側H3的右側對齊,並且鏈接位於最右側。所有的都在同一條線上。

我推薦上傳一張Photoshop圖像來展示你想要的最終結果。

同時,這裏是我的裂紋吧:

alt text