सही फ़्लोटिंग सूची-आइटम

मैं नीले तत्वों को दाईं ओर दाईं ओर और भूरे रंग के तत्वों को स्लाइड करना चाहता हूं। सूची-वस्तुओं को एक के तहत एक आदेश दिया जाना चाहिए।सही फ़्लोटिंग सूची-आइटम

किसी भी मदद की सराहना की:

यहाँ समझाने के लिए मैं क्या मतलब उदाहरण छवि कड़ी है।

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

स्रोत

2017-12-22 Elshad

बस इस सीएसएस गुण जोड़ें:

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

स्रोत

2017-12-22 10:18:12

आपको बस के बाद जारी तत्वों को अनुमति देना। 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>

आप शैली से भी/अजीब संदेशों, लेकिन आप स्थिति है जब कोई एक से अधिक संदेश भेजने के लिए भूल जाते हैं। नीले/ग्रे संदेशों को अलग करने के लिए आपको कक्षाओं (जैसे आने वाली, आउटगोइंग) का उपयोग करने की आवश्यकता है।

समाशोधन का बिंदु रहता है।

स्रोत

2017-12-22 10:17:55 panther

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>

स्रोत

2017-12-22 10:19:35 Xoog

इस

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

कोशिश

स्रोत

2017-12-22 16:55:51

सही फ़्लोटिंग सूची-आइटम

उत्तर

संबंधित मुद्दे