0

我有一个如下菜单，我需要使整个锚区域都可以点击，不幸的是它似乎没有。

HTML

<div><a href='#'>Home</a></div>    
<div><a href='#'>Contact us</a></div>    
<div><a href='#'>Feedback</a></div>    
<div><a href='#'>Products</a></div>

CSS

div {height:40px; padding-top:5px; border:#999 solid 1px; margin-bottom:5px;}
a{color:#FFF; font-size:15px;text-shadow: -1px -2px 2px #212121; filter: dropshadow(color=#212121, offx=-1, offy=-2); padding: 13px 0 0 16px; display:block; height:25px; width:100%; zoom:1; line-height: 30px;  }

小提琴作为http://jsfiddle.net/3Hyty/2/

更新：IE中确实存在问题

4

4 回答 4

0

您的 CSS 很好，问题是 jsfiddle 默认阻止链接点击，除非它们在新选项卡中打开。使链接有

target='_blank'

他们在 jsfiddle 中工作，如下所示：http: //jsfiddle.net/V3qML/1/。

显然，对于您的生产环境，只需按原样使用您的代码:)

于 2013-01-07T17:14:34.337 回答
0

将 onClick 添加到 div 并将 div 设置为使用 cursor:hand 或 cursor:pointer 取决于浏览器请参阅当用户将鼠标悬停在列表项上时如何使光标成为手？

应用于您的 jsFiddle：http: //jsfiddle.net/3Hyty/5/

操作路线是：

<div onClick="javascript:document.location.href='#';" style="cursor:hand;cursor: pointer;">Feedback</div>
于 2013-01-07T17:14:38.660 回答
0

HTML5 允许在锚点内使用块元素，这将锚点强制为其中块元素的尺寸。或者，使用 span 并将它们设置为 inline-block 或 block：

<a href='#'><div>Home</div></a>

或者：

<a href='#'><span class="block">Home</span></a>

<style>
span.block {display: block;}
</style>
于 2013-01-07T17:20:36.570 回答
0 
a{
  margin:0 10px;
  display:block;
  float:left;
  width:100%;
  color:#F00; 
  font-size:15px;
  text-shadow: -1px -2px 2px #212121; padding: 0 0; 
  height:25px; 
  zoom:1; 
  line-height: 30px;
}

它可以与左浮动有关

于 2013-01-08T14:08:14.760 回答