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 class

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

<强> FIDDLE

Answer 2

http://jsfiddle.net/YbN8D/3/

#social8 li {
    float: left;
}

你会注意到它们都在同一行上

然而，它确实将它们全部放在一起而不是你所拥有的那么小的余量。所以为了得到你想要的，我添加了

#social8output {
    margin: 0 2px;
}

.social8icon {
    margin: 0 2px;
}

并更新了小提琴http://jsfiddle.net/YbN8D/6/

jquery追加推内联li

2 个答案: