html – 如何将图像放在一起

发布时间：2020-12-14 21:17:23 所属栏目：资源来源：网络整理

导读：我试图将这两个“超链接”图标放在一起,但我似乎无法做到这一点.正如您所看到的,Twitter图标属于下一行..(它们都是超链接到各自的网站) HTML div class="nav3" style="height:705px;" div id="icons"a href="http://www.facebook.com/"img src="images/faceb

我试图将这两个“超链接”图标放在一起,但我似乎无法做到这一点.正如您所看到的,Twitter图标属于下一行..(它们都是超链接到各自的网站)

HTML

<div class="nav3" style="height:705px;">
    <div id="icons"><a href="http://www.facebook.com/"><img src="images/facebook.png"></a>
    </div>
    <div id="icons"><a href="https://twitter.com"><img src="images/twitter.png"></a>
    </div>
</div>

CSS

.nav3 {
    background-color: #E9E8C7;
    height: auto;
    width: 150px;
    float: left;
    padding-left: 20px;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    color: #333333;
    padding-top: 20px;
    padding-right: 20px;
}

#icons{position:relative; 
    width: 64px; 
    height: 64px; 
   }

    #icons a:hover {
     background: #C93;
        display: block;

 }

如何使对齐？

提前致谢

解决方法

你不需要div.

HTML：

<div class="nav3" style="height:705px;">
    <a href="http://www.facebook.com/" class="icons"><img src="images/facebook.png"></a>
    <a href="https://twitter.com" class="icons"><img src="images/twitter.png"></a>
</div>

CSS：

.nav3 {
    background-color: #E9E8C7;
    height: auto;
    width: 150px;
    float: left;
    padding-left: 20px;
    font-family: Arial,sans-serif;
    font-size: 12px;
    color: #333333;
    padding-top: 20px;
    padding-right: 20px;
}

.icons{
    display:inline-block;
    width: 64px; 
    height: 64px; 
   }

 a.icons:hover {
     background: #C93;
 }

见this fiddle

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!