正确的浮动列表项

Question

我想向右滑动蓝色元素,向左滑动灰色元素.列表项必须在另一个下面订购.

以下是解释我的意思的示例图像链接:

任何帮助赞赏.

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

Answer 1

只需添加此 css 属性：

.chat li {clear:both;}

.chat li {clear:both;}

.chat {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow: hidden;

}
.chat li {
  margin-bottom: 15px;
  padding: 10px 20px;
  border-radius: 20px;
  clear: both;
}
.chat li:nth-child(odd) {
  float: right;
  background-color: #52adf4;
  color: #fff;
}
.chat li:nth-child(even) {
  float: left;
  background-color: #e9e7e8;
  color: #333;
}