css 设置水平滚动条 及其样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
.ximiBlock::-webkit-scrollbar-track{  
	-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3);  
	border-radius: 5px;  
	background-color: rgba(255,255,255,0.8);
}
.ximiBlock::-webkit-scrollbar{  
	height: 10px;			/*设置滚动条样式*/  
	background-color: rgba(0,0,0,0);
}
.ximiBlock::-webkit-scrollbar-thumb{  border-radius: 5px;  -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.3);  background-color: #555;}
.ulbox li {float: left; padding: 0 5px; margin-right: 10px; list-style: none;}
.ulbox::-webkit-scrollbar-track{  -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3);  border-radius: 5px;  background-color: rgba(255,255,255,0.8);}
.ulbox::-webkit-scrollbar{  height: 10px;			/*设置滚动条样式*/  background-color: rgba(0,0,0,0);}
.ulbox::-webkit-scrollbar-thumb{  border-radius: 5px;  -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.3);  background-color: #555;}
		</style>
	</head>
	<body>
		<div style="width: 100px; height: 40px;overflow-x: scroll; overflow-y:hidden;white-space: nowrap;   " class="ximiBlock">
		{foreach $times as $k => $v} 
			<a href="{:url('/detail/'.$v)}">新闻-{$v}</a>
		{/foreach}
		</div>
		<div style="width: 500px; height: 40px;">
			<ul style="width: 100%; height: 100%; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; display: flex;" class="ulbox">
				<li>1241323141231 </li>
				<li>1241323141231 </li>
				<li>1241323141231 </li>
				<li>1241323141231 </li>
				<li>1241323141231 </li>
				<li>1241323141231 </li>
				<li>1241323141231 </li>
				<li>1241323141231 </li>
			</ul>
		</div>
	</body>
</html>


效果如图:
css 设置水平滚动条 及其样式_第1张图片
在这里插入图片描述

你可能感兴趣的:(css)