Html 刚刚丢失了CSS样式

对不起，我想让其他人来做我的工作，但我在这里感到很失落，这是我现在得到的图像：

当两个“Anonomymos”被指定为聊天室中活跃用户的位置时，然而，我在聊天室中添加越多的人，消息发布的

标记就位于活跃用户的

标记下，显然我希望彼此相邻显示。为此，我使用了一个预先制作的CSS样式表，我希望它能被改变以满足我的需要，但我对CSS知之甚少，所以我甚至不确定它在我的情况下是否可用，总之，我现在使用的CSS样式如下：

#ActiveUsers
{

    clear:both;
    border: 1px solid #cccccc;
    width: 356px;
    background: #E9ECEF;
   font-family: Arial, Helvetica, sans-serif;
   font-weight:bold;
   font-size : 12px;
   padding:2px;
   margin-bottom:10px;
   margin-top:10px;
   margin-left: 60px;

}
#chat
{
  margin: auto;
     border: 1px solid #cccccc;
     width: 356px;
     background: #E9ECEF;
    text-align:left;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-size : 12px;
    padding:2px;
    height:400px;
    overflow:auto;
}
#main {
    margin: auto;
    border: 1px solid #cccccc;
    width: 600px;
    min-height:150px;
    background: #F1F3F5;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-size : 12px;
    border-collapse:collapse;
}
#sender
{
    margin-left: 125px;
}

下面是.php文件中的结构：

<div id="main">
<div id="ActiveUsers"></div>
    <div id="chat"></div>


     <div id="sender">
   Your message: <input type="text" name="msg" size="30" id="msg" />
   <button onclick="doWork(document.getElementById('msg').value);">Send</button>
    </div>
    <span id="logOut">
            <form action="logout.php">
                  <input type="submit" value="Logout"/>
            </form>
    </span>
    </div>

您的留言：
发送

---

p.值得一提的是，现在的

#ActiveUsers width

已经超过了可用空间，但即使我将其设为30px，

#chat

仍然会随着每个登录的新用户而不断变化。

问题可能是，当活动用户动态添加到标记中时，它们会被包装在某些块元素中。根据它的显示方式，我猜

<div id="ActiveUsers"></div>

---

问题可能是，当活动用户动态添加到标记中时，它们被包装在某些块元素中。根据它的显示方式，我猜

<div id="ActiveUsers"></div>

---

我认为您只是以错误的方式添加用户。如果我理解得很好，它们应该像“User1，user2，randomnick，user4”那样插入，而我猜你应该将它们插入单独的标记中？我的意思是user1user2…..添加用户的一个好方法是使用一个列表：

用户1
用户2

，然后是css

\activeUsers{list style:none；}\activeUsers{display:inline；}

我认为您添加用户的方式不对。如果我理解得很好，它们应该像“User1，user2，randomnick，user4”那样插入，而我猜你应该将它们插入单独的标记中？我的意思是user1user2…..添加用户的一个好方法是使用一个列表：

User1
User2
然后css
\activeUsers{list style:none；}\activeUsers{display:inline；}
这几乎解决了我的问题-现在用户以我想要的方式显示在聊天窗口旁边，而不是在上面，但是我丢失了边界。这不是什么大问题，但如果解决这个问题很简单，最好在用户周围有一些边界。谢谢anywa，最重要的是，现在聊天窗口保持静止。我想我会一直保持这个状态。目前效果很好。这几乎解决了我的问题-现在用户以我想要的方式显示在聊天窗口旁边，而不是上面，但我失去了边界。这不是什么大问题，但是，如果这是一个简单的方法来解决这个问题，最好在用户周围有一些边界。谢谢anywa，最重要的是现在聊天窗口保持静止。我想我会一直坚持这一点。目前效果很好。
#ActiveUsers div {
    display: inline;
    .
    . /* Your styles here */
    .
}