テキスト整列の子要素が機能しない

Question

1対1のチャットをしようとしていますが、メッセージを泡の形にしたい。

この

は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に右への最初のメッセージでありますもう1つは左側にしておきます。

任意の助けをいただければ幸いです

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

..私はこのCSSを試みたが、それは働いていません！

Answer 1

text-alignは、コンテナ（テキストを囲むブロック要素）にある必要があります。ここで

は修正のための一例である。このような

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