文本對齊的子元素不起作用

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應位於容器（包裝文本的塊元素）上。

這裏是一個固定的例子：

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