Question

我正在停止一个简单的主页，并在那里使用youtube徽标来建立连接链接。但是徽标上面有一个意想不到的标记（我在附件中用标记突出显示）。我的HTML代码有什么问题？查看demo。

另外如何移动＆＃34;找到我＆＃34;一点点离开了吗？ Attachment

我在下面粘贴了我的HTML和CSS代码：

.HTML文件：

 <img src="about_me_modified.PNG" width="80%" height="50%"/> 

<p id="find_me_on"><br /><br />Find me on:<br><br><a href="https://www.facebook.com/zabirfatah"><img src="fblogo.PNG" /></a><br><a href="https://twitter.com/jabirfatah91"><img src="twitterlogo.PNG" /></a><br><a href="https://www.youtube.com/user/jabirfatah"><img src="youtubelogo.PNG" />
</a><br><a href="https://plus.google.com/100402704740320621129/about"><img src="googleplus-logo.PNG" /></a><br><a href="https://www.linkedin.com/pub/jabir-al-fatah/5b/50b/2b1"><img src="linkedinlogo.PNG" />
</a></p>

.CSS文件：

    #find_me_on{
float:right;
margin-right:20px;

}

Answer 1

下划线实际上是a标记没有正确格式化，因为锚是内联元素。如果你添加：

a{
   display:block;
}

到你的CSS并删除<br>，然后你得到这个result。

Answer 2

尝试以下代码。该行是因为新的行间距是img标记的末尾和a标记的结尾。您可以将a标记部分包含在div。

中

<img src="about_me_modified.PNG" width="80%" height="50%"/> 

<p id="find_me_on">
    <br /><br />Find me on:
    <div class="find_links">
        <br>
        <a href="https://www.facebook.com/zabirfatah"><img src="fblogo.PNG" /></a>
        <br>
        <a href="https://twitter.com/jabirfatah91"><img src="twitterlogo.PNG" /></a>
        <br>
        <a href="https://www.youtube.com/user/jabirfatah"><img src="youtubelogo.PNG" /></a>
        <br>
        <a href="https://plus.google.com/100402704740320621129/about"><img src="googleplus-logo.PNG" /></a>
        <br>
        <a href="https://www.linkedin.com/pub/jabir-al-fatah/5b/50b/2b1"><img src="linkedinlogo.PNG" /></a>
    </div>
</p>

<style>
    #find_me_on{
        float:right;
        margin-right:20px;
    }

    #find_me_on div.find_links {
        padding-left: 5px;
    }

    #find_me_on div.find_links a {
        text-decoration: none;
    }
</style>

Youtube徽标（在我的主页中使用）在右下角有一个意外的下划线？

2 个答案: