2010-09-21 109 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