anchor link is not clickable in full width - html

Question

I make a list that looks like the picture below. My problem is that not the whole link is clickable, only the text. I can't make a display: block on the anchor and give the link the full width because I already gave the anchor display: table-cell.
Here you can can see my problem and try out your code:
http://jsfiddle.net/kma_999/v0xkk587/
Thanks in advance!
HTML:
<div class="pane-content">
<ul>
<li>Kostenkontrolle (Mobile)</li>
<li>Sunrise Rechnung</li>
<li>Umzug</li>
<li>iPhone</li>
<li>Telefonieren im Ausland (Roaming)</li>
</ul>
</div>
CSS:
ul {
border: 1px solid lightgray;
padding-left: 0px;
}
ul li {
border-bottom: 1px solid lightgray;
list-style: none outside none;
margin-left: 20px;
margin-right: 20px;
vertical-align: middle;
}
ul li:last-child{
border-bottom: 0px solid black;
}
ul li a {
display: table-cell;
height: 75px;
vertical-align: middle;
padding-left: 20px;
color: black;
width: 100%;
}
ul li a:hover{
color: black;
text-decoration: none;
}
ul li a:after {
content: "\25b6";
font-size: 10px;
position: absolute;
right: 33px;
}

Answer 1

ul {
display: table;
border: 1px solid lightgray;
padding-left: 0px;
width: 100%;
}
ul li {
display: table-row;
list-style: none outside none;
margin-left: 20px;
margin-right: 20px;
vertical-align: middle;
}
ul li:last-child a {
border-bottom-width: 0;
}
ul li a {
display: table-cell;
height: 75px;
vertical-align: middle;
padding-left: 20px;
border-bottom: 1px solid lightgray;
color: black;
width: 100%;
}
You can see example

Answer 2

try this
ul li a {
display: inline-table;
height: 75px;
vertical-align:middle;
padding-left: 20px;
color: black;
width: 100%;
line-height:75px;
}

Answer 3

You can try below code:
ul li a {
display: block;
height: 50px;
padding: 25px 0px 0px 20px;
color: black;
width: 100%;
}

Answer 4

Try this:
ul li a {
color: black;
display: inline-block; // changed
height: 75px;
line-height: 75px; // added
padding-left: 20px;
vertical-align: middle;
width: 100%;
}

Answer 5

Try this
ul li a {
display: table-cell;
height: 75px;
vertical-align: middle;
padding-left: 20px;
color: black;
width: 500px;
}
I replace the width of a tag 100% to that of parent (li). Then it seems to work.

Answer 6

You can try this
ul li a {
height: 75px;
line-height: 75px;
padding-left: 20px;
color: black;
width: 100%;
display:block;
}
Instead giving it to vertical align middle you can also use line-height for make it middle.