CODEWITHSUNDEEP
htmlcss
Elshad
Elshad

Reputation: 88

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:

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's it going bro?</li>
<li>Thanks as usual</li>
</ul>

Upvotes: 5

Views: 64

Answers (4)

satyajit rout
satyajit rout

Reputation: 1651

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>

Upvotes: 1

Xoog
Xoog

Reputation: 926

using clear: both on your liwill 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>

Upvotes: 1

Elvin Mammadov
Elvin Mammadov

Reputation: 1120

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>

Upvotes: 1

pavel
pavel

Reputation: 27072

All you need is to clear after floated elements. Add clear: both to 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'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.

Upvotes: 2

Related Questions