网站前端制作之列表无缝滚动

这是一个关于列表无缝滚动和可切换无缝滚动的示例。以下是经过润色的代码:

* { margin: 0; padding: 0; } li { list-style: none; } .donation-list .box { margin-top: 20px; height: 330px; overflow: hidden; background: #F5F5F5; } #donation_list { max-width: 360px; margin: 0 auto; } .donation-list ul li { padding: 15px 0; color: #777777; font-size: 16px; line-height: 1.7; border-bottom: 1px dashed #f1f1f1; overflow: hidden; } .donation-list ul li .date, .donation-list ul li .name, .donation-list ul li .sum { float: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .donation-list ul li .date { width: 100px; } .donation-list ul li .sum { width: 110px; text-align: right; } .donation-list ul li .name { width: calc(100% - 210px); text-align: center; }

• 列表1
• 列表2
• 列表3