Question

我在这个网站上有一个导航菜单：http://blog.helpcurenow.org/test/redesignMockup/我已将列表项锚点设置为display：block，并定义了与整个包含元素匹配的高度和宽度，但只有文本是可点击的。任何想法为什么整个标签不可点击？

这是我为链接编写的CSS规则：

#nav {
 width:auto;
 height:60px;
 list-style:none;
 float:right;
}
#nav li.mainNavItem {
 float:left;
 width:91px;
 height:60px;
 text-align:center;
 margin:0px 5px;
 position:relative;
}
#nav li.mainNavItem a:link, #nav li.mainNavItem a:visited {
 color:#4e4439;
 font: bold 14px Tahoma, Arial, sans-serif;
 text-decoration:none;
 word-spacing:-1px;
 line-height:60px;
 vertical-align:middle;
 display:block;
 width:91px;
 height:60px;
 text-shadow:#ffffff 0px 1px 0px;
}
#nav li.mainNavItem a:hover {
 color:#85bf46; 
}
#nav-about, #nav-hospitals, #nav-media, #nav-help-now, #nav-sponsor {

}
#nav-about:hover, #nav-hospitals:hover, #nav-media:hover, #nav-help-now:hover, #nav-sponsor:hover {
 background:url(http://blog.helpcurenow.org/test/redesignMockup/img/cure-sprite-main.png) 0px 0px no-repeat;
}
/* - optional rule for on:click bg effect --
#nav-about:active, #nav-hospitals:active, #nav-media:active, #nav-help-now:active, #nav-sponsor:active {
 background:url(../img/navBgSprite.png) center -120px no-repeat;
 color:#ffffff;
 text-shadow:none;
}
*/
li#nav-donate.mainNavItem  a:link, li#nav-donate.mainNavItem  a:visited {
 height:47px;
 color:#ffffff;
 font-size:19px;
 letter-spacing:0px;
 line-height:17px;
 padding-top:13px;
 text-shadow:none;
 background:url(http://blog.helpcurenow.org/test/redesignMockup/img/cure-sprite-main.png) 0px -60px no-repeat;
}
li#nav-donate.mainNavItem a:hover {
 color:#046228;
 background:url(http://blog.helpcurenow.org/test/redesignMockup/img/cure-sprite-main.png) 0px -180px no-repeat;
}

#nav li.current {
 background:url(http://blog.helpcurenow.org/test/redesignMockup/img/cure-sprite-main.png) 0px -120px no-repeat;
}
#nav li.current a:link, #nav li.current a:visited {
 color:#ffffff;
 text-shadow:#6e5e4c 0px 1px 0px;
}

关于为什么整个导航标签不是链接，只有单词？

的任何想法

感谢。

Answer 1

根据Firebug，您设置了display: inline的链接，以及!important标记，该标记将覆盖您将其设置为阻止的任何其他位置。

换句话说，删除此代码：

.navItem {
    display: inline !important;
}

为什么显示：阻止我的导航项目没有做我期望的？

1 个答案: