在一行中显示不换行：：子级设置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>
