Javascript CSS/NodeJS：刷新用户列表奇怪的位置

我现在正在与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);
});

当然还有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>

您可能需要登录两个不同用户名的选项卡才能看到它！

---

我真的不知道为什么会发生这种情况以及如何修复它。

您正在用户列表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);
});

---

UL只能将LI作为孩子，而不是DIV。更正您正在创建的错误HTML。修复了它，但不是主要问题。然后给我们展示一个在线示例，或者您希望任何人自己重新构建您的系统来看到您的错误吗？嗯，我不知道如何演示这个？我没有VPS或类似的东西。演示：

<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>

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

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);
});