我正在设计一个导航栏。代码如下所示:
<nav class="menu">
<ul class="topnav">
<li><a href="index.html">Overview</a></li>
...
</ul>
</nav>
在css中,我有以下li元素的代码:
ul.topnav li{
cursor:pointer;
list-style-type:none;
display:inline;
float:left;
background-clip:padding-box;
text-align:center;
width:139px;
background-repeat:repeat-x;
background-image:url(images/nav_normal.png);
background-color:#CC33CC;
font-size:14px;
padding:9px 0 8px 0;
margin:0;
color:#6F5270;
text-shadow:#FCF 0 1px;
}
ul.topnav li a{
font-size:15px;
font-weight:bold;
padding:auto;
color:#FFFFFF;
text-shadow:#903 0 1px;
text-decoration:none;
}
它会生成以下按钮:
问题是链接可点击区域(上面显示为蓝色)未覆盖按钮的整个表面。所以当我点击按钮的边缘时,它不起作用。我尝试使用 padding 值但无法解决问题。是否有一种简单有效的方法使链接覆盖按钮的整个区域,以便它可以在用户可能点击的按钮上的任何位置工作?
答案 0 :(得分:10)
尝试在display: block;
的CSS中设置ul.topnav li a
。
答案 1 :(得分:3)
制作<a>
代码display:block
并将填充,宽度等添加到锚点。
ul.topnav li{
cursor:pointer;
list-style-type:none;
display:inline;
float:left;
margin:0;
}
ul.topnav li a{
display: block;
color:#6F5270;
text-shadow:#FCF 0 1px;
background-repeat:repeat-x;
background-image:url(images/nav_normal.png);
background-clip:padding-box;
background-color:#CC33CC;
text-align:center;
width:139px;
font-size:14px;
padding:9px 0 8px 0;
font-size:15px;
font-weight:bold;
padding:auto;
color:#FFFFFF;
text-shadow:#903 0 1px;
text-decoration:none;
}
答案 2 :(得分:1)
试试这个:
ul.topnav li a{
font-size:15px;
font-weight:bold;
color:#FFFFFF;
display:block;
height:17px;
line-height:17px;
text-align:center;
text-shadow:#903 0 1px;
text-decoration:none;
}
答案 3 :(得分:0)
我只使用这个
ul.topnav li a{
display:inline-block;
}