2017-12-22 35 views
6

Tôi muốn trượt các phần tử màu xanh lam sang các phần tử bên phải và màu xám ở bên trái. Danh sách các mặt hàng phải được đặt hàng dưới danh mục khác.Các danh sách nổi chính xác

Dưới đây là liên kết hình ảnh ví dụ để giải thích những gì tôi muốn nói:

enter image description here

Bất kỳ trợ giúp đánh giá cao.

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

Trả lời

1

Chỉ cần thêm css này thuộc tính:

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

2

Tất cả bạn cần là để xóa các yếu tố sau nổi. Thêm clear: both vào LI s.

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

thông điệp Bạn phong cách bởi chẵn/lẻ, nhưng bạn quên tình huống khi ai đó gửi nhiều hơn một tin nhắn. Hơn bạn cần phải sử dụng các lớp (ví dụ: gửi đến, gửi đi) với các thông báo màu xanh/xám khác nhau.

Điểm thanh toán bù trừ.

1

sử dụng clear: both trên li của bạn sẽ cung cấp cho bạn những hiệu quả mong muốn.

.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

thử này

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

Các vấn đề liên quan