jquery append 将内联 li 向下推

Question

我可能遗漏了一些非常明显的东西，但我终究无法弄清楚。在列表图标悬停时，文本显示在“输出”li 中，应该与其余部分保持一致，只是它一直被向下推，我不明白为什么完整代码和演示: http://jsfiddle.net/YbN8D/1/

        <ul id="social8">
            <li id="facebook" class="social8icon"></li>
            <li id="raptr" class="social8icon"></li>
            <li id="social8output"></li>


        </ul>

*

    $(document).ready(function()
{ 
    $("#facebook").mouseenter(function() {
        $("#social8output").append("Facebook");
    });
    $("#raptr").mouseenter(function() {
        $("#social8output").append("Raptr");
    });
    $(".social8icon").mouseleave(function() {
        $("#social8output").empty();
    });

});

*

body {
font-family: 'Century Gothic';
font-size: '10px';
}
#social8 li {
    display: inline-block;

    list-style: none;
}
.social8icon {
 background: #000;
 width: 24px;
 height: 24px;
}
#social8output {
    text-align: center;
    line-height: 24px;
    height: 24px;
    width: 120px;
    background: #ff0000;
    font-size: 8px;

}

Answer 1

将 vertical-align: top; 添加到 #social8 li 类

#social8 li {
    display: inline-block;
    vertical-align: top;
    list-style: none;
}

FIDDLE