正确的浮动列表项
[英]Correct floating list-items
问题描述
I want to slide blue elements to the right and gray elements to the left. 
我想向右滑动蓝色元素，向左滑动灰色元素。 The list-items must be ordered one under another. 列表项必须在另一个下面订购。
Here is the example image link to explain what I mean: 以下是解释我的意思的示例图像链接：
Any help appreciated. 任何帮助赞赏。
.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
All you need is to clear after floated elements. 您需要的只是浮动元素后清除。 Add clear: both to LI s. 添加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>
You style messages by even/odd, but you forget to situation when someone send more than one message. 您可以按偶数/奇数格式设置消息，但是当有人发送多条消息时您会忘记这种情况。 Than you need to use classes (eg. incoming, outgoing) to differ blue/grey messages. 比你需要使用类（例如传入，传出）来区分蓝/灰消息。
The point of clearing stays. 结算点仍然存在。
解决方案2
1 已采纳 2017-12-22 10:18:12
Just add this css properties: 只需添加此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
using clear: both on your li will give you the desired effect. 使用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
try this 试试这个
.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.