css超出不换行可滑动

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
		<title>css超出不换行可滑动</title>
		<style type="text/css">
			.wrapper .list {
				width: 100%;
				height: 20px;
				display: inline;
				white-space: nowrap;
				overflow-x: scroll;
				float: left;
				overflow-y: hidden
			}
			
			.wrapper .list li {
				display: inline-block;
				margin: 0;
			}
		</style>
	</head>

	<body>
		<div class="wrapper">
			<ul >
				<li>测试测试测试测试超出不换行可以滑动测试测试测试测试超出不换行可以滑动测试测试测试测试超出不换行可以滑动测试测试测试测试超出不换行可以滑动</li>
			</ul>
		</div>
	</body>

</html>
项目使用场景

css超出不换行可滑动