How can I make floated link clickable for whole row? - html

Question

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 1

Why isn't the floated element underlined?
16.3.1 Underlining, overlining, striking, and blinking: the 'text-decoration' property
Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.
To fix that, you can set text-decoration: inherit on the floated span.
span:last-of-type {
float: right;
text-decoration: inherit;
}
How can I make it clickable for space between the spans?
You can set the <a> to display:block, it will the occupies the entire width available.
a {
display: block;
}
ul {
width: 40%;
border: 1px solid black;
list-style: none;
padding: 0;
}
a {
display: block;
}
span:last-of-type {
float: right;
text-decoration: inherit;
}
<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>

Answer 2

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.

Answer 3

<ul class="whole-row-link">
<li>
<span>New York</span>
<span>$489</span>
</li>
<li>
<span>New York</span>
<span>$489</span>
</li>
</ul>
ul.whole-row-link li {
position: relative;
}
ul.whole-row-link li a {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0
}

Answer 4

I was able to make the space between the link clickable but it stillls looks weird when you dont have underline.
I used the flexbox to acheive the effect of the clickable.
`http://codepen.io/Ebeldev/pen/BKVMwP`