Question

Here is HTML code:

<div class="row">
    <span class="item"><a href="#">A</a></span>
    <span class="item"><a href="#">B</a></span>
    <span class="item"><a href="#">C</a></span>
    <span class="under"></span>      
</div>

Here is CSS code:

.row {
    line-height:0;}
.item {
    line-height:1.2;}
.row .under {
    display:inline-block;
    width:100%;}

Here is jsfiddle link with example: http://jsfiddle.net/SRhK9/12/

Problem is that in webkit links are partially unclickable (from the bottom side to the middle of the link).

If I`ll remove span.under problem will dissapear, but I need this element to align blocks with class .item using text-align:justify, like this http://jsfiddle.net/SRhK9/18/

Any ideas on how to workaround this?

Answer 1

Found an answer. If you will specify position:relative to the .item it will fix the problem. Here is demo: http://jsfiddle.net/SRhK9/68/