html - Fill whole space of - with including a floating -

html - Fill whole space of <li> with <a> including a floating <span> -

my problem:

i reddish questionmark in 2nd "a" expand parent li's height. can see positioned in 3rd anchor's line

usually add together display:block "a" , "a" expands across whole li, floating span makes problems. while works if span has plenty space in same line text of anchor text not expand li if span lone in new line.

as anchor text not limited in length, cannot set height property li or a, can set span, not solve problem. tried alter span div, did not find solution.

here jsfiddle.

html:

<div> <ul> <li> <a href="#">text <span> ok </span></a> </li> <li> <a href="#">long long long long text <span class="woot"> ?</span></a> </li> <li> <a href="#">short text <span> ok </span></a> </li> </ul> </div>

css

div { width:130px } { display:block; } span { float:right; display:block; } /************************************/ /****just improve visibility****/ .woot { color:red; } li a:hover { background:grey; } li { background:lightgrey; }

edit: forgot mention, can li include problematic span adding div around each li, original problem in case background of li cannot styled, still empty line (with span floating on right side) not li background.

i utilize class on parent a element , give padding :

a.wooted { padding-right: 6px; position: relative; }

then position absolute question mark bottom right of :

.woot { color:red; position: absolute; right: 0; bottom: 0; }

jsfiddle demo

html css