Korrekte schwebende Listenelemente

Ich möchte blaue Elemente nach rechts und graue Elemente nach links schieben. Die Listenelemente müssen untereinander angeordnet werden. HierKorrekte schwebende Listenelemente

ist das Beispiel Bild Link zu erklären, was ich meine:

Jede Hilfe sehr geschätzt.

.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>

Quelle

2017-12-22 Elshad

Fügen Sie einfach diese CSS-Eigenschaften:

.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>

Quelle

2017-12-22 10:18:12

Alles, was Sie brauchen, ist nach Floats zu löschen. Füge clear: both zu LI s hinzu.

.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>

Sie Stil-Einträge von gerade/ungerade, aber Sie vergessen Situation, wenn jemand mehr als eine Nachricht senden. Dann müssen Sie Klassen verwenden (zB eingehende, ausgehende), um blau/graue Nachrichten zu unterscheiden.

Der Punkt des Löschens bleibt.

Quelle

2017-12-22 10:17:55 panther

mit clear: both auf Ihrem li geben Sie den gewünschten Effekt.

.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>

Quelle

2017-12-22 10:19:35 Xoog

versuchen, diese

.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>

Quelle

2017-12-22 16:55:51

Korrekte schwebende Listenelemente

Antwort

Verwandte Themen