リストアイテムを右揃えにするには

Question

リストのアイテムを右揃えにして、その幅をコンテンツの長さに合わせようとしていますが、何も動作していないようです。

ここに私のコードです：

.messages { 
 
    overflow: hidden; 
 
    list-style: none; 
 
    padding: 0 0 50px 0; 
 
    margin: 0; 
 
} 
 
.messages .sent { 
 
    background: white; 
 
    color: #424242; 
 
} 
 
.messages .received { 
 
    background: dodgerblue; 
 
    color: white; 
 
} 
 
.messages .sent, 
 
.messages .received { 
 
    padding: 5px 8px; 
 
    margin-bottom: 8px; 
 
    max-width: 80%; 
 
} 
 
.messages * .message { 
 
    margin-bottom: 5px; 
 
} 
 
.messages .sent .message .p { 
 
    text-align: left; 
 
} 
 
.messages * .message p { 
 
    word-wrap: break-word; 
 
    text-align: left; 
 
    font-size: 18px; 
 
    padding: 0; 
 
    margin: 0; 
 
}

<ul class="messages"> 
 

 
    <li class="sent"> 
 
    <div class="message"> 
 
     <p>Hey</p> 
 
    </div> 
 
    </li> 
 

 
    <li class="received"> 
 
    <div class="message"> 
 
     <p>Hey man!</p> 
 
    </div> 
 
    </li> 
 

 
    <li class="sent"> 
 
    <div class="message"> 
 
     <p>What's up?</p> 
 
    </div> 
 

 
    <div class="message"> 
 
     <p>How are ya?</p> 
 
    </div> 
 
    </li> 
 

 
    <li class="received"> 
 
    <div class="message"> 
 
     <p>Not bad</p> 
 
    </div> 
 

 
    <div class="message"> 
 
     <p>Not bad at all</p> 
 
    </div> 
 
    </li> 
 

 
</ul>

そして、ここでは、ページがそのコードを使用して次のようになります。

しかし、ここではすぐに一緒に投げ例です。達成しようとしていること：

私はだけではなく、ページ全体のデザインを台無し.messages * .messageセレクタと.messages .sent下text-align: right;、下display: inline-block;を追加しようとしました。

私は上記の投稿を私が認めたいと思うよりも長く達成しようとしてきましたが、私は何もできないようです。特定のアイテムをリストの右側に整列させ、他のアイテムを左側に整列させる方法を教えてください。

ありがとうございます！テキスト整列して抱えている

Answer 1

問題が.messages .sent .message .pと.messages * .message .p内の既存のテキストの整列を除去し、でそれを置き換えることによって解決することができます：あなたがメッセージを右浮くする必要が

.messages .received { 
    text-align: left; 
    clear: both; 
} 

.messages .sent { 
    width: 20%; 
    float: right; 
    clear: both; 
} 

注意送信済みメッセージと受信済みメッセージの両方でclear: bothが送信されました。

.messages .received .message { 
    width: 40%; 
    background: dodgerblue; 
} 

.messages .sent .message { 
    background: white; 
    color: #424242; 
} 

パディングも.messages .sent, .messages .receivedから.messages * .message pにそれを移動することで、更新する必要があります。背景色は、自分の幅を必要とするmessages .received .messageとmessages .sent .message、に移動する必要があります。 https://jsfiddle.net/Lbyyk5d7/6/

Answer 2

コンテナ含む：）設計要求に合致

更新フィドルを、あなたはこれらの変更を行うことについてあまり心配する必要はありませんので、私は、新しいフィドルにあなたのためにこれのすべてをまとめましたテキスト（背景色付き）はインラインブロックで表示され、次の要素は左または右に揃えられます。要するに

https://jsfiddle.net/1zryafq4/1/

：

.messages .message { 
    display:block; 
} 

.messages .message p{ 
    display:inline-block; 
} 

.messages .sent{ 
    text-align:right; 
} 

Answer 3

が、これはあなたが探しているものであると思います。

.messages { 
 
    overflow: hidden; 
 
    list-style: none; 
 
    padding: 0 0 50px 0; 
 
    margin: 0; 
 
    background: #efeeec; 
 
} 
 

 
.messages .sent { 
 
    text-align:right; 
 
} 
 

 
.messages .sent p { 
 
    background: white; 
 
    color: #424242; 
 
} 
 

 
.messages .received p { 
 
    background: dodgerblue; 
 
    color: white; 
 
} 
 

 
.messages .sent p, 
 
.messages .received p{ 
 
    display:inline-block; 
 
    padding: 5px 8px; 
 
     margin: 0px; 
 
} 
 

 
.messages .message { 
 
    display:block; 
 
} 
 

 
.messages .sent .message .p { 
 
    text-align: left; 
 
    display:inline; 
 
}

<ul class="messages"> 
 

 
    <li class="sent"> 
 
    <div class="message"> 
 
     <p>Hey</p> 
 
    </div> 
 
    </li> 
 

 
    <li class="received"> 
 
    <div class="message"> 
 
     <p>Hey man!</p> 
 
    </div> 
 
    </li> 
 

 
    <li class="sent"> 
 
    <div class="message"> 
 
     <p>What's up?</p> 
 
    </div> 
 

 
    <div class="message"> 
 
     <p>How are ya?</p> 
 
    </div> 
 
    </li> 
 

 
    <li class="received"> 
 
    <div class="message"> 
 
     <p>Not bad</p> 
 
    </div> 
 

 
    <div class="message"> 
 
     <p>Not bad at all</p> 
 
    </div> 
 
    </li> 
 

 
</ul>