点击<li>标签触发<a>中的超链接

在许多列表中经常用到 <ul> 标签, 

便于链接将使用 <a> 放在 <li> 中,

但是容易出现点击 <li> 没反应,点击 <a> 标签才行,

这对用户有很不好的用户体验。

 

我举个好吃的栗子~

 


 

 

1 F 男装          

2 F 女装          

3 F 美妆          

4 F 数码          

   (粉红色是便于说明)

    虽然 每一个 <a> 便签都有超链接,但当你点击粉红色或者上下的白色空白时超链接就没有反应了!

    这就是今天的问题!!

<ul>
    <li><a href="#">1F 男装</a></li>
    <li><a href="#">2F 女装</a></li>
    <li><a href="#">3F 美妆</a></li>
    <li><a href="#">4F 数码</a></li>
</ul>

 

 


 

 

              1 F 男装

               2 F 女装

3 F 美妆

               4 F 数码

这样看起来是不是就好多了。

 

<style>
    ul{
    width:100px;
    }
    a{
    display:block;
    width:100px;
    height:50px;
    line-height:50px;
    text-align:center;
    text-decoration: none;
    }
</style>

 

 

 

 

posted @ 2016-02-13 18:16  马小宝  阅读(5980)  评论(0编辑  收藏  举报