0

我看过其他类似的问题，但我无法将其应用于我的问题。我希望每个文本链接周围的框都是可点击的，而不仅仅是文本。

HTML

<div class="container">
    <ul class="nav">
        <li class="nav-home">
            <a href="index.html">Home</a>
        </li>
        <li class="nav-games"> 
            <a href="games.html">Games</a>
        </li>
        <li class="nav-chat">
            <a href="chat.html">Chat</a>
        </li>
        <li class="nav-suggestions">
            <a href="suggestions.html">Suggestions</a>
        </li>
    </ul>
</div>

CSS

.nav {
width: 900;
clear: right;
height: 55px;
margin-left: 22px;
margin-right: 22px;
padding: 0;
z-index: 5;
overflow: visible;
background: #161616; 
background: -moz-linear-gradient(top,  #161616 0%, #282828 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#161616), color-stop(100%,#282828)); 
background: -webkit-linear-gradient(top,  #161616 0%,#282828 100%);
background: -o-linear-gradient(top,  #161616 0%,#282828 100%);
background: -ms-linear-gradient(top,  #161616 0%,#282828 100%); 
background: linear-gradient(to bottom,  #161616 0%,#282828 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#161616', endColorstr='#282828',GradientType=0 );
border: 1px solid #090909;
box-shadow: inset 0px 0px 1px rgba(255,255,255,.2), 0px 3px 5px rgba(0,0,0,.5);
}

.nav li {
list-style-type: none;
float: left;
display: inline-block;
padding: 0px 89px;
width: 55;
text-align: center;
height: 55px;
border-right: 1px solid #090909;
box-shadow: 1px 0px 0px rgba(255,255,255,.1);
-webkit-transition:all 0.2s linear; 
-moz-transition:all 0.2inear; 
-o-transition:all 1s linear; 
transition:all 0.2s linear; 
}

.nav li.logo:hover { opacity: 1; background-color: transparent;}

.nav li:last-child { border: none; box-shadow: none; }

我display: block;在此处添加了可点击文本的上方和下方，但不能向左或向右。

.nav li a, nav ul li a:visited {
line-height: 55px;
text-decoration: none;
display: block;
color: #9c9c9c;
font-size: 15px;
font-family: "Droid Sans", Arial, sans-serif;
text-transform: uppercase;
text-shadow: 0px 1px 0px rgba(0,0,0,.9);
-webkit-transition:all 0.2s linear; 
-moz-transition:all 0.2s linear; 
-o-transition:all 0.2s linear; 
transition:all 0.2s linear;     
}

.nav li:hover { 
background-color: rgba(0,0,0,.2); 
background-color: #191919\9; 
-webkit-transition:all 0.2s linear; 
-moz-transition:all 0.2s linear; 
-o-transition:all 0.2s linear; 
transition:all 0.2s linear;
color: white;
}
.nav li:hover a { color: white; 
-webkit-transition:all 0.2s linear; 
-moz-transition:all 0.2s linear; 
-o-transition:all 0.2s linear; 
transition:all 0.2s linear;
}

#nav-home .nav li.nav-home a, #nav-games .nav li.nav-games a, #nav-chat .nav li.nav-chat a, 
#nav-comments .nav li.nav-comments a  { color: white; }

这是 jsfiddle http://jsfiddle.net/U2d9X/3/的视觉效果。如果您能提供帮助，将不胜感激。如果需要更多信息或澄清，请询问而不是拒绝这个问题。

4

3 回答 3

5

1）从你的 LI 元素中删除左/右填充。

2) 调整 LI 元素的宽度。

3) a { width: 100% !important; height: 100% !important; }

于 2013-03-13T16:13:08.547 回答
0

将<li>标签放在标签内<a>。例如：

<a href="index.html">
    <li class="nav-home">
        Home
    </li>
</a>

然后，在 CSS 中，更改.nav li a, nav ul li a:visited为.nav a, nav ul a:visited, 因为<a>不再在<li>.

在 jsFiddle 上，我只对“主页”选项卡进行了 HTML 更改，以便您可以将其与其他标签进行比较。

修改后的代码

于 2013-03-13T19:12:56.073 回答
-1

如果所有按钮的尺寸相同，则始终可以为链接元素本身分配大小，例如：

一种 {

宽度：100%；高度：100%；

}

只需调整它，直到事情很好地匹配。

于 2013-03-13T16:15:06.650 回答