如何把图像彼此相邻

我试图把这两个'超链接'图标彼此相邻，但我似乎无法做到这一点。正如你所看到的，Twitter图标下降到下一行。（他们都超链接到各自的网站）如何把图像彼此相邻

enter image description here

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; 

}

我该如何将对齐排列在一起？

在此先感谢

来源

2013-04-28 user2320517

你试过'显示：“inline''？ – MikeB 2013-04-28 07:06:30

btw：在一个HTML文件中不能有两个具有相同值的ID，您最好将其更改为class，然后将所有'＃图标'在css中更改为'.icons' – jao 2013-04-28 07:08:46

我曾尝试过它没有在我的浏览器上工作，但它可以在jsfiddle上工作..嗯.. – user2320517 2013-04-28 07:09:07

-1

而是在#icons使用position:relative的，你可以只把这种美丽，也许增加一个z索引或东西，所以画面会不会被掩盖。希望这可以帮助。

来源

2013-04-28 07:07:44 Max

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

来源

2013-04-28 07:12:14 jao

谢谢！奇迹般有效！为此欢呼！ – user2320517 2013-04-28 07:14:55

没问题。希望这有点可以理解 – jao 2013-04-28 07:15:52

@jao他可能以后需要他们。 – 2013-04-28 07:19:00

更改div来跨越。和空间使用  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; 
}

跨度的图标不破线，格呢。

来源

2013-04-28 07:16:01

使用的间距是soooo上个世纪。 – 2013-04-28 07:43:11

so @MrLister 21世纪是什么？当然我们也可以使用它。 – 2013-04-28 07:49:15

使用'position：absolute;'也是一个选项。或'padding'。 – 2013-04-28 07:51:11

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

http://jsfiddle.net/JhpRk/

#icons{float:left;}

来源

2013-04-28 07:16:36 Teffi

看起来不错，只是不重复div id的 - 使用相同的类 http://jsfiddle.net/JhpRk/228/ – 6opko 2017-05-07 16:24:42

如何把图像彼此相邻

回答

相关问题