在一行中显示不换行：：子级设置display:inline-block，父级设置word-break: normal强制不换行；
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>c3轮播图</title> <style type="text/css"> *{ margin: 0; padding: 0; } .all{ width: 795px; height: 450px; position: absolute; top: 50%; transform: translateY(-50%); left: calc(50% - 400px); overflow: hidden; } ul{ width: 5600px; word-break: normal; animation: run 21s linear alternate infinite; } li{ display: inline-block; margin-left: -5px; } img{ width: 800px; height: auto; } @keyframes run{ from{ transform: translateX(0); } 7.15%{ transform: translateX(0); } 14.3%{ transform: translateX(-800px); } 21.45%{ transform: translateX(-800px); } 28.5%{ transform: translateX(-1600px); } 35.65%{ transform: translateX(-1600px); } 42.8%{ transform: translateX(-2400px); } 49.95%{ transform: translateX(-2400px); } 57.1%{ transform: translateX(-3200px); } 64.25%{ transform: translateX(-3200px); } 71.4%{ transform: translateX(-4000px); } 78.55%{ transform: translateX(-4000px); } 85.7%{ transform: translateX(-4800px); } 92.85%{ transform: translateX(-4800px); } 100%{ transform: translateX(-4800px) } } </style> </head> <body> <div class="all"> <ul> <li><img src="timg.jpg"/></li> <li><img src="timg (1).jpg"/></li> <li><img src="time(2).jpg"/></li> <li><img src="timg (3).jpg"/></li> <li><img src="timg (4).jpg"/></li> <li><img src="timg (5).jpg"/></li> <li><img src="timg(6).jpg"/></li> </ul> </div> </body> </html>