單擊突出顯示的鏈接在未列出的列表中

下面是我正在使用的網頁示例。問題在於用戶必須點擊鏈接才能將其定向到目標頁面。是否有一種方法可以使每個鏈接處於活動狀態的突出顯示框以及對點擊作出響應？單擊突出顯示的鏈接在未列出的列表中

我的用戶抱怨說，除非他們點擊鏈接，否則點擊框不起作用。

任何幫助將不勝感激。

<html> 
    <head> 
    </head> 
    <style type="text/css"> 
    li { 
     background-color: #F5F2EE; 
     background-position: left top; 
     background-repeat: no-repeat; 
     border: 1px solid #E9E3DD; 
     height: auto; 
     width: 100px; 
     margin-bottom: 4px; 
     padding: 4px 5px 4px 20px; 
    } 

    li a, span { 
     color: #4B0F19; 
     text-decoration: none; 
    } 

    li:hover { 
     background-color: #DEB887; 
     cursor: pointer; 
    } 
    </style> 

    <body> 
     Hello world 

     <ul> 
      <li><a href="http://google.com">Please see this</a></li> 
      <li><a href="http://msn.com">Another link</a></li> 
      <li><a href="http://twitter.com">The main link</a></li> 
      <li><a href="http://bbc.co.uk">fourth link</a></li> 
     </ul> 

    </body> 
</html>

來源

2011-09-26 Julie

題外話，但你'你style''head'內所屬。 – graphicdivine

@Mob如果你點擊一段文字並接近邊緣，它不再是'a'，但仍然是'li'。 – ANeves

@ANeves好的，我明白了。朱莉也看到http://css-tricks.com/examples/ButtonMaker/ – Mob

充分利用li有0填充和利潤率的adisplay: block;和移動樣式a。
這樣a將擴大以填充所有li，因此不會有任何區域是菜單項的一部分，但它不會被a填充。

這是否有意義？你瞭解不同的方法嗎？

活生生的例子：http://jsfiddle.net/NB6Wx/

（你也可以捕捉的li使用JavaScript的點擊，並引發了a點擊...但將被修補，實際上可以解決的問題）
（一個不好的解決方案。）

來源

2011-09-26 09:59:42 ANeves

非常感謝，它現在運作良好。我非常欣賞它。 – Julie

那麼據我瞭解問題是<a>顯示爲內聯元素。您可以修改CSS以使其成爲塊元素，並且它將佔用整個<li>元素。

像

li a { 
     display:block; 
     width:100%; 
    }

來源

2011-09-26 10:02:17 Ehtesham

更好，但仍有缺陷，因爲li有填充：嘗試左邊的第一個20像素。 – ANeves

你需要添加li a {display:block;}你的CSS。

這裏是一個工作DEMO

來源

2011-09-26 10:04:49 defau1t

更好，但仍有缺陷，因爲'li'有填充：嘗試左邊的第一個20px。 – ANeves

感謝您的反饋，我只是複製了她的代碼，並給出了一個匆忙的解決方案。 – defau1t

單擊突出顯示的鏈接在未列出的列表中

回答

相關問題