文本对齐子元素不起作用

Question

我正在尝试进行一对一的聊天，我希望这些消息以气泡形式出现。

这是HTML代码：

<div id="msgWindow" class="block">
    <div id="messages">
    <p class="sysmsg">You're now connected with a random chat partner...</p>
    <p class="sysmsg">Say Hello!</p><p class="msg-item">
    <span class="stranger">Stranger</span> hey</p>
    <p class="msg-item"><span class="you">Me</span> hi</p>
    </div>
</div>

这就是它的样子：

所以我基本上想做的是text-align右边的第一条消息，并将第二条消息保留在左边。

我试过这个CSS，但它没有工作..

#messages{
    height: 350px;
    padding: 10px;
    overflow: auto;
    word-wrap: break-word;
}
#messages p{
    padding: 5px 0;
    }
.msg-item{
}
.you, .stranger{
    padding: 4px;
    color: #FFF4F4;
    font-weight: bold;
    border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    margin-right: 5px;
}
.you{    
    background-color: #555;
    text-align: right;

}
.stranger{    
    background-color: #D94D58;
    text-align: left;
}

任何帮助将不胜感激！

Answer 1

text-align应位于容器上（包装文本的块元素）。

以下是修复的示例：

＆＃13;

＆＃13;

#messages{
  height: 350px;
  padding: 10px;
  overflow: auto;
  word-wrap: break-word;
}
#messages p{
  padding: 5px 0;
}
.msg-item{
}
.you span, .stranger span{
  padding: 4px;
  color: #FFF4F4;
  font-weight: bold;
  border-radius: 0.5em;
  -moz-border-radius: 0.5em;
  -webkit-border-radius: 0.5em;
  margin-right: 5px;
}
.you span{    
  background-color: #555;

}
.stranger span{    
  background-color: #D94D58; 
}
p.you {
  text-align: right;
}
p.stranger {
  text-align: left;
}

＆＃13;

<div id="msgWindow" class="block">
  <div id="messages">
    <p class="sysmsg">You're now connected with a random chat partner...</p>
    <p class="sysmsg">Say Hello!</p>
    <p class="msg-item stranger"><span>Stranger</span> hey</p>
    <p class="msg-item you"><span>Me</span> hi</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;