html - 文本对齐子元素不起作用

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 应该在容器上(包裹文本的 block 元素)。

这是一个修复示例:

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

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