Geek Answers Handbook

Fix floating list items

I want to move the blue elements to the right and the gray elements to the left. List items must be ordered one below the other.

Here is an example image link to explain what I mean:

enter image description here

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 it going bro?</li>
<li>Thanks as usual</li>
</ul>
Run codeHide result
+6
source share
4 answers

Just add the 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 it going bro?</li>
<li>Thanks as usual</li>
</ul>
Run codeHide result
+1
source

All you need to do is clear after placing the items. Add clear: bothto LIs.

.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 it going bro?</li>
<li>Thanks as usual</li>
</ul>
Run codeHide result

/, , - . (, , ), / .

.

+2

using clear: bothon yours li, you will get 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 it going bro?</li>
        <li>Thanks as usual</li>
        </ul>

</body>
Run codeHide result
+1
source

try it

.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 it going bro?</li>
<li>Thanks as usual</li>
</ul>
Run codeHide result
+1
source

More articles:


All Articles