设为首页 - 加入收藏 ASP站长网(Aspzz.Cn)- 科技、建站、经验、云计算、5G、大数据,站长网!
热搜: 创业者 数据 手机
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

html – gt;中的链接不会覆盖整个表面

发布时间:2021-01-01 02:15 所属栏目:34 来源:网络整理
导读:我正在设计一个导航栏.代码如下所示: nav class="menu" ul class="topnav" lia href="index.html"Overview/a/li ... /ul/nav 在css中,我有以下代码用于li元素: ul.topnav li{ cursor:pointer; list-style-type:none; display:inline; float:left; backgrou

我正在设计一个导航栏.代码如下所示:

<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;
}

它会生成以下按钮:

问题是链接可点击区域(上面显示为蓝色)未覆盖按钮的整个表面.所以当我点击按钮的边缘时,它不起作用.我尝试使用填充值但无法解决问题.是否有一种简单有效的方法使链接覆盖按钮的整个区域,以便它可以在用户可能单击的按钮上的任何位置工作?

解决方法

尝试设置display:block;在ul.topnav li的CSS中.

(编辑:ASP站长网)

    网友评论
    推荐文章
      热点阅读