Question

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

以下是解释我的意思的示例图片链接：

任何帮助表示赞赏。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您需要的是在浮动元素之后清除。将clear: both添加到LI s。

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

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

只需添加此css属性：

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

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

使用clear: both上的li会为您提供所需的效果。

.chat li {
margin-bottom: 15px;
padding: 10px 20px;
border-radius: 20px;
margin-bottom:10px;
clear: both;
}

＆＃13;

<body>
    <style>
.chat {
    list-style: none;
    padding: 0;
    overflow: hidden;
    margin: 0;
  
  }
  .chat li {
    margin-bottom: 15px;
    padding: 10px 20px;
    border-radius: 20px;
    margin-bottom:10px;
    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;
  }
</style>
<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>

</body>

＆＃13;

Answer 4

试试这个

＆＃13;

@GetMapping
public ResponseEntity<ProductListDto> listAllProducts() {
    List<Product> products = productRepository.findAll();
    if (products.isEmpty()) {
        return new ResponseEntity<ProductListDto>(HttpStatus.NO_CONTENT);
    }
    ProductListDto productListDto = new ProductListDto(products);
    return new ResponseEntity<ProductListDto>(productListDto, HttpStatus.OK);
}

＆＃13;

.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) {
  width: max-content;
  margin-left: auto;
  background-color: #52adf4;
  color: #fff;
}
.chat li:nth-child(even) {
  width: max-content;
  margin-right: auto;
  background-color: #e9e7e8;
  color: #333;
}

＆＃13;

正确的浮动列表项

4 个答案: