JSFiddle - React, Tailwind, and code Playground

by NGLN

HTML

Original wish, not working in IE7:
<ul class="O"> 
    <li><a href="#"><span>Text covers one line</span></a></li> 
    <li><a href="#"><span>Text covers two lines, problem occurs</span></a></li> 
</ul> 
<br />
Solution A: anchor click area does not stretch to parent size:
<ul class="A"> 
    <li><a href="#"><span>Text covers one line</span></a></li> 
    <li><a href="#"><span>Text covers two lines, problem occurs</span></a></li> 
</ul> 
<br />
Solution B: one more element in the markup:
<ul class="B"> 
    <li><a href="#"><ins></ins><span>Text covers one line</span></a></li> 
    <li><a href="#"><ins></ins><span>Text covers two lines, problem occurs</span></a></li> 
</ul>

CSS

ul.O li a { display: table; zoom: 1; width: 240px; height: 60px;} 
ul.O li a span { width: 200px; display: table-cell; zoom: 1; vertical-align: middle; padding: 0 30px 0 20px; } 

ul.A li { width: 240px; height: 60px; line-height: 60px; }
ul.A li a { display: inline-block; line-height: 0; vertical-align: middle; padding: 0 30px 0 20px; } 
ul.A li a span { line-height: 1.1em; }

ul.B li a { display: block; width: 240px; height: 60px; }
ul.B li a ins { display: inline-block; vertical-align: middle; height: 100%; }
ul.B li a span { display: inline-block; vertical-align: middle; padding: 0 30px 0 20px; }

/* Just for illustrative clarification purposes : */
li { border: 1px solid; margin: 1px; width: 240px; }
a { background: #ccc; }

/* And a little allround fix: */
span { cursor: pointer; }