Html 如何将图像彼此相邻放置

我试图把这两个“超链接”图标放在一起，但我似乎做不到。如您所见，twitter图标会落在下一行。。（它们都链接到各自的网站）

HTML

我如何使这些对象彼此相邻对齐

---

提前感谢

而不是在

#图标中使用
位置：相对
，您可以将其删除，或者添加z索引或其他内容，这样图片就不会被掩盖。希望这有帮助。
您不需要div

HTML:

请参见将div更改为span。并使用

HTML

span不断线，div断线。
检查此项。只需使用float并去掉相对值


尝试将两个图像放在一起。像这样：


您是否尝试过显示：“内联”

？顺便说一句：一个HTML文件中不能有两个具有相同值的ID，您最好将其更改为class，然后将css中的所有

#图标更改为
。图标
我以前尝试过，但在我的浏览器上不起作用，但在JSFIDLE上起作用。。嗯…@MikeB可以，但是悬停坏了：/@ja会的！谢谢没问题。希望有一点understandable@jao他以后可能需要它们。@user2320517如果您以后需要div来设置内容的样式，请使用span，如我的答案所示。好的！我来看看！谢谢你的帮助。非常感谢！注意：旧ie浏览器不支持内联块。老实说，我更喜欢float，无论是旧的还是新的浏览器，它都很有魅力。使用间距是上个世纪的事。那么@MrLister什么是21世纪？当然我们也可以使用它也是一个选项。或者
padding
。是的，这有点过时，但在某些情况下已经足够了。现在它可能是：
span.icons{marginleft:2em；display:inline block}
或类似的东西：-）是的，css。您还可以使用
边距
，透明的
边框
，增加
宽度
…看起来还可以，只是不要重复div id-使用相同的类这确实有效。需要一个被接受的答案。非常感谢。代码没有显示。。。但我希望你们知道我的意思，你们需要把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>

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

.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{
    display:inline-block;
    width: 64px; 
    height: 64px; 
   }

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

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

.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{
display:inline-block;
width: 64px; 
height: 64px; 
}

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

#icons{float:left;}