Alignment Issue with Floats Next to Absolutely Positioned Elements Inside a List

Question

I'm trying to place an absolutely positioned element next to a floating element. This seems to work, however the inline list element moves up.

To stop this from happening I can either take out the float: right or take out the position: absolute. The reason I need to use position: absolute is because my actual code relies on an image instead of the text "World".

How can I stop this from happening? The clear: both doesn't appear to be doing anything.

http://jsfiddle.net/wJF9T/2/

<ul>
    <li>Hello</li>
    <li>
        <div class="wrapper">
            <i>World</i>
            <span>Again</span>
        </div>
    </li>

</ul>

ul {
    list-style-type:none;
}

li {
    display: inline-block;
    padding: 10px;
    background: aqua;
}

.wrapper {
    position: relative;
    margin: 0 auto;
    clear: both;
    width: 100px;
}

i {
    position:absolute;
    top: 0;
    left: 0;
}

span {
    float: right;
}

Answer 1

In your fiddle if you just specify the alignment of the inline-block (<li>) like this

vertical-align: top;

or this

vertical-align: bottom;

it fixes the problem. Not sure if it works in your context.