將文本鏈接移動得更近阻止某些鏈接

Question

我的垂直菜單出現問題。

我想我的菜單看起來像這樣（http://svinehytten.dk/test/），但正如你看到「link2」阻礙點擊「link1」。

我使用span s到控制文本，但我開放給任何sugestions（我需要它完全有效的XHTML 1.0）

我已經嘗試了不同的方法可以解決，甚至要並把它們變成與javascript的鏈接，但無論我嘗試什麼解決方案，更大的文本塊都會影響到其他人。

任何人有任何想法？是否有可能「發回」或使小鏈接成爲主鏈？

Answer 1

要繼續我的意見，我會用相似圖片：

http://jsfiddle.net/lollero/dnH4C/1/

HTML：

<ul id="menu"> 
    <li><a href="#"><img src="http://dummyimage.com/100x40/000/fff"></a></li> 
    <li><a href="#"><img src="http://dummyimage.com/100x40/000/fff"></a></li> 
    <li><a href="#"><img src="http://dummyimage.com/200x40/000/fff"></a></li> 
    <li><a href="#"><img src="http://dummyimage.com/50x40/000/fff"></a></li> 
    <li><a href="#"><img src="http://dummyimage.com/50x40/000/fff"></a></li> 
    <li><a href="#"><img src="http://dummyimage.com/50x40/000/fff"></a></li> 
    <li><a href="#"><img src="http://dummyimage.com/50x40/000/fff"></a></li> 
</ul> 

CSS：

#menu { 
    width: 200px; 
} 

#menu img { 
    float: left; 
} 

Answer 2

您可以更改堆棧水平span s。

試試這個

#link1 { 
    font-family: Verdana, Geneva, sans-serif; 
    font-size: 27px; 
    line-height: 40pt; 
    padding: 0; 
    margin: 0; 
    white-space: nowrap; 
    position: relative; /* ADD THIS */ 
    z-index: 1000;  /* ADD THIS */ 
}