青い要素を右に、灰色の要素を左にスライドさせたい。 リストアイテムは、順番に並べる必要があります。ここで浮動リストアイテムを修正する
は、私が何を意味するか説明するための例の画像リンクです:
すべてのヘルプ高く評価しました。
.chat {
list-style: none;
padding: 0;
margin: 0;
overflow: hidden;
}
.chat li {
margin-bottom: 15px;
padding: 10px 20px;
border-radius: 20px;
}
.chat li:nth-child(odd) {
float: right;
background-color: #52adf4;
color: #fff;
}
.chat li:nth-child(even) {
float: left;
background-color: #e9e7e8;
color: #333;
}
<ul class="chat">
<li>Hi Joe</li>
<li>Hi, how're u?</li>
<li>Fine, how's it going bro?</li>
<li>Thanks as usual</li>
</ul>