列表中绝对定位元素旁边的浮点对齐问题

Question

我试图将一个绝对定位的元素放在浮动元素旁边。这似乎有效，但内联列表元素向上移动。

要阻止这种情况发生，我可以取出float: right或取出position: absolute。我需要使用position: absolute的原因是因为我的实际代码依赖于图像而不是文本＆＃34; World＆＃34;。

如何阻止这种情况发生？ clear: both似乎没有做任何事情。

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

如果你只是像这样指定内联块（<li>）的对齐方式，那么在你的小提琴中

vertical-align: top;

或者

vertical-align: bottom;

它解决了这个问题。不确定它是否适用于您的环境。