如何把圖像彼此相鄰

我試圖把這兩個'超鏈接'圖標彼此相鄰，但我似乎無法做到這一點。正如你所看到的，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

如何把圖像彼此相鄰

回答

相關問題