CSS/Node JS：刷新用户列表奇怪的位置答案

【问题标题】：CSS/NodeJS: Refreshing userslist weird positionCSS/Node JS：刷新用户列表奇怪的位置
【发布时间】：2014-02-10 16:47:22
【问题描述】：

我现在正在与 NodeJS 聊天，但现在我遇到了一个奇怪的问题，当有人加入聊天时：

但是当你加入聊天或有人断开或连接时，会发生一些奇怪的事情：

用户列表似乎移动了 1 个像素。你能在顶部和右侧看到一条粗线吗？为什么会这样？

据我所知，当我“刷新”用户列表时，代码没有任何变化：

socket.on('refreshUsers', function(refreshData) {
    var users_html = "<div id=\"userList\"><ul class=\"users\"><div class=\"scroll-pane\">";
    console.log("Refreshing users...");
    
    refreshData.users.forEach(function(data) {
            users_html += "<li><img src=\"./pic/"+ data.pic +"\">"+ data.username +"</li>";
        });
    
    users_html += "</ul></div></div>";
    
    $( "#userList" ).html(users_html);
});

当我加载用户列表时（所以当你不加入时）：

function buildChat() {
    console.log("Build chat...");
    $( "#container" ).fadeOut(0);
    var rooms_html = "<div class=\"head\"><select name=\"rooms\">";
    var users_html = "<div id=\"userList\"><ul class=\"users\"><div class=\"scroll-pane\">";
    var chatBox = "<div id=\"chatBox\"></div>";
    var messagesBoard = "<div id=\"messagesBoard\"><div id=\"messagesHead\">UBB | Emotions | Help</div><textarea id=\"message\" placeholder=\"Typ hier om te chatten\"></textarea></div>";
    socket.on('startChatInfo', function(chatInfo) {
    
        console.log("Loading rooms...");
        chatInfo.rooms.forEach(function(data) {
            rooms_html += "<option>"+ data.from +" &raquo "+ data.name +"</option>";
        });
        rooms_html += "</select></div>";
    
        console.log("Loading users");
        chatInfo.users.forEach(function(data) {
            users_html += "<li><img src=\"./pic/"+ data.pic +"\">"+ data.username +"</li>";
        });
        
        users_html += "</ul></div></div>";
        
    
        $( "#container" ).html(rooms_html + users_html + chatBox + messagesBoard);
        $( "#container" ).fadeIn(1000);
    });
    
}

这是 CSS，无论我是加载用户还是刷新，都是一样的：

#userList {
    margin:0px;
    width:228px;
    height:355px;
    float:right;
    border:1px solid #cccccc;
    background-color: #f2f2f2;
}

.users li {
    list-style-type:none;
    background-color: #f2f2f2;
    width:100%;
    height:50px;
    border-bottom: 1px solid #cccccc;
    line-height:50px;
    padding-left:7px;
}

.users li:hover {
    background-color: #cccccc;
    cursor:pointer;
}

ul {
    padding:0px;
}

.scroll-pane {
    width: 100%;
    height: 355px;
    overflow: auto;
}

当然还有 HTML：

<div id="userList"><ul class="users"><div class="scroll-pane"><li><img src="./pic/none.png">Anne</li><li><img src="./pic/none.png">Dylan</li><li><img src="./pic/none.png">lennard</li><li><img src="./pic/none.png">Mackie</li></div></ul></div>

演示网址：http://apps.jreitsma.eu:3101/

要加入聊天，请在控制台中输入：

socket.emit('requestUsername', { value: 'hereyourname' });

您可能需要使用不同的用户名登录 2 个标签才能看到它！我真的不知道为什么会发生这种情况以及如何解决它。

【问题讨论】：

UL 只能将LI 用作子级，而不是DIV。更正您正在创建的错误 HTML。
已修复，但不是主要问题。
那么向我们展示一个在线示例（或者您是否希望任何人自己重新构建您的系统以查看您的错误？）
好吧，我不知道如何演示这个？我没有 VPS 或类似的东西。
演示：apps.jreitsma.eu:3101

标签： javascript html css node.js

【解决方案1】：

您在 #userList div 中放置了一个具有相同 id 的 div。将刷新用户函数改为如下：

socket.on('refreshUsers', function(refreshData) {
    var users_html = "<div class=\"scroll-pane\"><ul class=\"users\">";
    console.log("Refreshing users...");

    refreshData.users.forEach(function(data) {
        users_html += "<li><img src=\"./pic/"+ data.pic +"\">"+ data.username +"</li>";
    });

    users_html += "</ul></div>";

    $( "#userList" ).html(users_html);
});

【讨论】：