플로팅 목록 항목 수정

오른쪽의 파란색 요소와 왼쪽의 회색 요소를 슬라이드하고 싶습니다. 목록 항목은 하나씩 주문해야합니다. 어떤 도움을 주시면 감사플로팅 목록 항목 수정

: 여기

무슨 뜻인지 설명하는 예제 이미지 링크입니다.

.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

그냥이 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을 사용

출처

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

당신에게 원하는 효과를 줄 것이다.

.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

답변

관련 문제