我如何才能將箭頭圖像放置在“ answer1”的左側

Question

這是代碼，有點混亂，在得到答案之后將對其進行修復。

<table>
    <tr>
        <td>
            <a href="" onmouseover="document.getElementById('place-holder-1').src='graphics/websites/labyrinth/labyrintharrow1.png';" onmouseout="document.getElementById('place-holder-1').src='';"> 
                website screenshot service 
                <img src="" id="place-holder-1" style="zindex: 100; position: absolute;" />
            </a>
        </td>
    </tr>
</table>

這是一個現場演示： http : //jsfiddle.net/Lrnvrdub/

感謝您的幫助，我們非常感謝。

編輯：所有答復都工作得非常好，但是當我嘗試調整圖像的大小時，我嘗試同時使用css和html，當鏈接沒有懸停時，圖像的位置會出現一個空的正方形。

這是一個示例： http : //jsfiddle.net/csewukgs/

Answer 1

刪除內聯樣式並添加此樣式

a img{float:left}

您可能還想增加一些邊距，但是您會明白的

注意：為該img提供一個類是個好主意，因此您不必一定是這種泛型。 喜歡

.bullet{float:left}

HTML

<img class="bullet" src="uyourimage" id="place-holder-1"  />

Answer 2

法比奧的可靠答案的另一種選擇是使用背景圖像。

<a class="bullet" href="">Answer1</a>
<a class="bullet" href="">Answer2</a>

.bullet {
    background: url("path/to/image.png") no-repeat 0 50%;
    padding-left: 18px;  //width of image, plus some extra spacing
}

好處是，如果有鏈接列表，則無需為每個鏈接添加一個img元素。

需要注意的是，如果圖像是非裝飾性的並且實際上傳達了重要的信息，請使用具有適當title屬性的img元素，這對屏幕閱讀器用戶很有幫助。

<a class="bullet" href="">Answer1 <img src="..." title="The correct answer"></a>

// use Fabio's float:left solution

Answer 3

這是我的解決方案： http : //jsfiddle.net/1Latpnzn/2/

假定您要向右移動文本以為圖像騰出空間。 通過將占位符設置如下：

#place-holder-1 {
    display: inline-block;
    vertical-align: middle;
}

重新排序html：

<a href="" id="hover-link">
    <img id="place-holder-1" />
    <span>Answer1</span>
</a>

並刪除position: absolute; 圖像可以位於文本的左側。

Answer 4

如果您可以將位置從絕對塊更改為行內塊，並將圖像移動到將要使用的“答案1”文本之前，並使其與文本對齊，則可以添加vertial-align：bottom樣式

<a href=""
  onmouseover="document.getElementById('place-holder-1').src='graphics/websites/labyrinth/labyrintharrow1.png';"
  onmouseout="document.getElementById('place-holder-1').src='';">
  <img src="" id="place-holder-1" style="zindex: 100; position: inline-block; vertical-align:bottom" />
      Answer1
</a>