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

发布时间：2024-06-10 10:33:39 所属栏目：资源来源：DaWei

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

<nav class="menu">

<ul class="topnav">

<li><a href="index.html">Overview</a></li>

...

</ul>

</nav>

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

<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中.

（编辑：应用网_常德站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!