点击<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>