Karolina Ticha Karolina Ticha - 7 months ago 18
HTML Question

How can I make floated link clickable for whole row?

CodePen is here: http://codepen.io/anon/pen/BKVMoY



ul {
width: 40%;
border: 1px solid black;
list-style: none;
padding: 0;
}
span:last-of-type {
float: right;
}

<ul>
<li>
<a href="#">
<span>New York</span>
<span>$489</span>
</a>
</li>
<li>
<a href="#">
<span>New York</span>
<span>$489</span>
</a>
</li>
<li>
<span>New York</span>
<span>$489</span>
</li>
<li>
<span>New York</span>
<span>$489</span>
</li>
</ul>





Why isn't the floated element underlined?

How can I make it clickable for space between the spans?

Answer

I think you can just add display: block; to the anchor tags in order to make the entire row clickable. I'm not exactly sure why the floated element removes the underline.