正确的浮动列表项
[英]Correct floating list-items
问题描述
我想向右滑动蓝色元素，向左滑动灰色元素。 列表项必须在另一个下面订购。
以下是解释我的意思的示例图像链接：
任何帮助赞赏。
.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>
4 个解决方案
解决方案1
2 2017-12-22 10:17:55
您需要的只是浮动元素后清除。 添加clear: both LI 。
.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>
您可以按偶数/奇数格式设置消息，但是当有人发送多条消息时您会忘记这种情况。 比你需要使用类（例如传入，传出）来区分蓝/灰消息。
结算点仍然存在。
解决方案2
1 已采纳 2017-12-22 10:18:12
只需添加此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>
解决方案3
1 2017-12-22 10:19:35
使用clear: both你的li都会给你想要的效果。
.chat li {
margin-bottom: 15px;
padding: 10px 20px;
border-radius: 20px;
margin-bottom:10px;
clear: both;
}
<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>
解决方案4
1 2017-12-22 16:55:51
试试这个
.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; }
<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>
列表项之间的差距
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.