Html
    Css
    Js

    
                        
ul,li {
	list-style:none;
	margin:0;
	padding:0;
}
ul {
	width:100%;
	height:50px;
	display:flex;
	align-content:center;
	overflow-x:scroll;
	overflow-y:hidden;
	white-space:nowrap;
	/* ul中的内容不换行 */
}
ul li {
	display:inline-block;
	line-height:50px;
	padding:0 10px;
	font-size:16px;
	color:#000000;
}
.active {
	color:red;
	border-bottom:2px solid red;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

导航条点击居中

demo内有引入外部js(vue.js、jquery),vue只起到了数据遍历的功能,核心js代码可以在任何html使用的

0