刚丢失了CSS风格

时间:2011-06-08 20:29:11

标签: html css

对不起,我想让别人去做我的工作,但我觉得我真的迷失了,这里是我现在所得到的一张照片:

Curretn layout

如果两个“Anonomymos”在聊天中成为活跃用户的位置,那么我在聊天中添加的<div>标记的人越多,就会发布消息的<div>标记。 {1}}活跃用户的标签显然我希望彼此相邻显示。我使用预制的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>
PS请注意,现在#ActiveUsers width不仅仅是免费空间,但即使我将其设为30px,#chat <div>仍然会记录每个新用户。

1 个答案:

答案 0 :(得分:1)

问题可能是您的Active Users在动态添加到标记时被包装在某个块元素中。根据它的显示方式,我猜是

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

变成

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

检查您的活动用户是否被任何标记包装。如果它们包含<div>标记,则需要将其添加到CSS中:

#ActiveUsers div {
    display: inline;
    .
    . /* Your styles here */
    .
}