Correct floating list-items
Question
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 answers
solution1
2 2017-12-22 10:17:55
All you need is to clear after floated elements. Add clear: both to 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>
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.
solution2
1 ACCPTED 2017-12-22 10:18:12
Just add this css properties:
.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>
solution3
1 2017-12-22 10:19:35
using clear: both on your li will give you the desired effect.
.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>
solution4
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.