將<a>標記放在4幅圖像的橫幅上，以連接到4個不同的網址

我想要在某個橫幅上放置標籤，位於我擁有的橫幅上。這個橫幅有4個不同的標誌，我需要每個鏈接。將<a>標記放在4幅圖像的橫幅上，以連接到4個不同的網址

橫幅--- >>>>

ImageOne ImageTwo ImageThree ImageFour

橫幅--- >>>>

ImageOne URL = www.cnnsi.com

ImageTwo地址= www.cnn.com等等

我怎麼能做到這一點，我把它們放在水平方向？

我可以做第一個沒有任何問題，但我需要使用絕對值的位置爲其餘3？

下面是一些Css：如果我將位置設置爲：相對於#imageTwo - 則它將位於頁眉頂部的高度151處的標題橫幅之下，寬度爲999。它會將它放在#imageOne下面的標頭之外。任何幫助，將不勝感激！

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <link rel="stylesheet" type="text/css" href="../Content/Site.css"/> 
    <script src="../Scripts/jquery-1.8.2minO.js"   type="text/javascript"> 
</script> 
</head> 
    <body> 
     <div id="header" title="Test"> 
      <a id="imageOne" href="http://cnnsi.com" target="_blank" title="cnnsi.com"></a> 
      <a id="imageTwo" href="http://cnn.com" target="_blank" title="cnn.com"></a> 
     </div> 
    </body> 
</html> 


#imageOne { 
    display: block; 
    position: relative; 
    top: 24px; 
    left: 16px; 
    height: 95px; 
    width: 162px; 
} 

#imageTwo { 
    display: block; 
    position: relative; 
    top: 24px; 
    left: 175px; 
    height: 95px; 
    width: 162px; 
}

來源

2015-02-10 user272727

要麼使用

float:left; 
width:25%;

所有圖像，或者你可以用

display:inline;

設置他們，如果你指定一個類，所有的圖像會更容易。另外，如果你只是刪除顯示：塊你應該沒問題。通常你想避免使用位置：在這種情況下aboslute。

來源

2015-02-10 00:25:46

#imageOne { display：inline; top：24px; left：16px; height：95px; width：162px; } #imageTwo {display：inline; top：24px; left：260px; height：90px; width：230px; } #imageThree { display：inline; top：68px; left：575px; height：70px; width：146px; }我做了以下，但沒有網址現在標籤出現了嗎？ – user272727 2015-02-10 00:57:19

我想我可能正在尋找顯示器：inline-block：我會讓你知道的。 – user272727 2015-02-10 01:13:02

將<a>標記放在4幅圖像的橫幅上，以連接到4個不同的網址

回答

相關問題