CSS - 圖像/鏈接問題

我正在嘗試爲這些行創建一個CSS，但它們沒有按照我想要的方式工作。會有幾條類似的線條（約60）。CSS - 圖像/鏈接問題

首先：所有行將使用img src =「staticimage.png」。是否可以將此圖像設置爲CSS中的默認圖像（它將處理鏈接，之前在「a」標記中設置）？

二：我怎麼能刪除尺寸代碼（WIDTH = 「50」 ALIGN =「右）這個圖像，並把它放在CSS

這裏是我的代碼：？

HTML代碼：

<div id="whiteborder"><img src="image1.png">Text 1<a href="linkone.html"><img src="staticimage.png" width="50" align="right"></a></div> 
<div id="whiteborder"><img src="image2.png">Text 2<a href="linktwo.html"><img src="staticimage.png" width="50" align="right"></a></div> 
<div id="whiteborder"><img src="image3.png">Text 3<a href="linkthree.html"><img src="staticimage.png" align="right"></a></div>

CSS代碼：

#whiteborder 
{ 
    background: white; 
    margin: 2px 10px 0px 10px; 
    box-sizing: border-box; 
    padding: 20px; 
    text-align: left; 
    font-weight: bold; 
    font-size:10px; 
}

PS：用數字的所有文本將是不同的我不知道W上。螞蟻任何Javascript來設置這些行。

在此先感謝！

來源

2011-05-09 Claudio

你應該能夠將您的影像對準了這樣的排序：

#whiteborder a img 
{ 
    width: 50px; 
    float: right; 
}

但是，如果你改變你的a標籤display: block; float: right和設置就可以了background-image，那麼你可以與分配img並將所有這些a標籤的樣式設置在一個位置。

Working Demo

來源

2011-05-09 13:25:46 Town

我剛剛將有關圖像的問題作爲背景消除。現在有沒有解決方案？ – Claudio 2011-05-09 13:34:59

@Claudio：如果這樣容易起飛，那爲什麼要把它放在首位？ ;）在我的答案中查看演示 - 是否符合你的需求？ – Town 2011-05-09 13:40:30

男士非常感謝。它工作完美。 – Claudio 2011-05-09 13:57:58

我不是你想在這裏建立，但解決您的個人查詢什麼完全清楚：

不能以任何其他方式設置「staticimage.png」作爲默認值，但作爲使用CSS的背景圖像
要從圖像HTML中刪除「尺寸標註代碼」，您可以設置寬度：50px;在你的CSS，並與右邊對齊：float; right;

來源

2011-05-09 13:22:20 Steph

好吧，我把圖片背景問題關閉了，它可以設置爲背景。現在有沒有解決方案？ – Claudio 2011-05-09 13:26:10

HTML：

<div id="whiteborder"> 
    <img src="image1.png">Text 1 <a href="linkone.html"></a> 
    <img src="image2.png">Text 2 <a href="linktwo.html"></a> 
    <img src="image3.png">Text 3 <a href="linkthree.html"></a> 
</div>

CSS：

#whiteborder a{ 
    background: repeat-x url("staticimage.png"); 
    width: 50px; 
    height: 10px; 
    ... 
}

附：你不應該多次使用同一個id，但是如果你需要的話，你可以使用class而不是

來源

2011-05-09 15:04:32 tsds

CSS - 圖像/鏈接問題

回答

相關問題