2017-12-22 9 views
6

青い要素を右に、灰色の要素を左にスライドさせたい。 リストアイテムは、順番に並べる必要があります。ここで浮動リストアイテムを修正する

は、私が何を意味するか説明するための例の画像リンクです:

enter image description here

すべてのヘルプ高く評価しました。

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

答えて

1

ただ、このCSSプロパティを追加します。あなたのli

.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>
clear: bothを使用して

2

必要なのは、後に浮かべ要素をクリアすることです。 clear: bothLIに加えます。

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

偶数/奇数によってあなたのスタイルのメッセージ、誰かが複数のメッセージを送信するときには、状況に忘れます。青/灰色のメッセージを区別するために、クラス(たとえば、着信、発信)を使用する必要があります。

クリアポイントは保持されます。

1

はあなたに所望の効果が得られます。

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

1

この

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

を試してみてください
関連する問題