如何将图像彼此相邻答案

【问题标题】：How to put an image next to each other如何将图像彼此相邻
【发布时间】：2013-04-22 01:08:01
【问题描述】：

我正在尝试将这两个“超链接”图标并排放置，但我似乎做不到。如您所见，推特图标落在下一行..（它们都超链接到各自的网站）

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;

 }

如何使对齐彼此相邻？

提前致谢

【问题讨论】：

你试过display : 'inline'吗？
顺便说一句：一个HTML文件中不能有两个ID相同的值，最好将其更改为class，然后将css中的所有#icons更改为.icons
我之前尝试过，但它在我的浏览器上不起作用，但它在 jsfiddle 上起作用.. 嗯..
@MikeB 有效，但悬停搞砸了：/
@ja 会这样做！谢谢！

标签： html css image

【解决方案1】：

你不需要 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, 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;
 }

见this fiddle

【讨论】：

没问题。希望这有点可以理解
@jao 他以后可能需要他们。
@user2320517 如果您以后需要 div 来设置内容样式，请使用我的回答中显示的 span。
好的！我去看看！谢谢您的帮助。非常感谢！
请注意：旧的 ie 浏览器不支持 inline-block。老实说，我更喜欢浮动，它在所有新旧浏览器中都像魅力一样。

【解决方案2】：

将 div 更改为 span。并使用&nbsp; 分隔图标 HTML

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

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

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

span 不会换行，div 会。

【讨论】：

间距使用上个世纪真是太棒了。
那么@MrLister 21 世纪是什么？当然我们也可以使用它。
使用position:absolute; 也是一种选择。或padding.
是的，它有点过时了，但在某些情况下已经足够了。现在它可能是：span.icons { margin-left:2em; display:inline-block } 或类似的东西:-)
是的，CSS。也可以使用margin，透明border，增加width...

【解决方案3】：

看看这个。只需使用 float 并摆脱 relative。

http://jsfiddle.net/JhpRk/

#icons{float:left;}

【讨论】：

看起来不错，只是不要重复 div id - 使用相同的类 jsfiddle.net/JhpRk/228
这确实有效。需要是公认的答案。非常感谢

【解决方案4】：

尝试将两张图片并排放置。像这样：

    <div id="icons"><a href="http://www.facebook.com/"><img src="images/facebook.png"></a><a href="https://twitter.com"><img src="images/twitter.png"></a>
    </div>

【讨论】：

哎呀。代码没有显示......但我希望你知道我的意思
您需要将 HTML 放入“代码围栏” - 这次我已经为您完成了！

【解决方案5】：

除了在#icons 中使用position:relative，您可以将其去掉，并添加一个z-index 或其他东西，这样图片就不会被掩盖。希望这会有所帮助。

【讨论】：