Ссылки в обоснованных товарах

Question

У меня есть некоторые обоснованные элементы списка. Я хочу перейти к соответствующим ссылкам внутри элементов списка при нажатии в этих элементах списка.

http://codepen.io/asimkt/pen/ZYqaax

Мой HTML:

<ul> 
    <li class="btn"><a href="#">2</a></li> 
    <li class="btn"><a href="#">3</a></li> 
    <li class="btn"><a href="#">4</a></li> 
    <li class="btn"><a href="#">5</a></li> 
    <li class="btn"><a href="#">6</a></li> 
</ul> 

Мой CSS:

ul { 
    list-style:none; 
    width: 400px; 
    background:#aaa; 
    border-collapse: separate; 
    table-layout: fixed; 
} 
li { 
    display: table-cell; 
    float: none; 
    width: 1%; 
    padding:5px; 
} 
li > a { 
    text-decoration: none; 
    padding: 0 15px; 
} 
li:hover { 
    background:#eee; 
} 
li > a:hover { 
    color:#3cfc2c; 
    font-size: 20px; 
} 

Как вы можете видеть, что я могу перейти к ссылкам, непосредственно нажав на них, но я хочу, чтобы перейти к эти ссылки при нажатии на элементы списка.

Я могу сделать это, предоставив некоторые дополнения, но количество элементов списка неизвестно, поэтому ширина каждого элемента списка также неизвестна. Поэтому я не могу дать некоторое фиксированное дополнение.

Как установить тег привязки, занимающий все пробелы внутри его родительского элемента списка?

Answer 1

Изменить этот селектор:

li > a { 
    text-decoration: none; 
    padding: 0 15px; 
} 

в

li > a { 
    text-decoration: none; 
    padding: 0 15px; 
    display: block; 
} 

И вся площадь должна быть интерактивными.