爱站程序员基地纯css写一个滑动导航
2020/07/20
<div class=\"quiz-cont\"><ul class=\"tab-head\"><li class=\"tab-head-item\"><p onclick=\"ClickQuizXuan(1,this)\" class=\"quiz-cont-p quiz-cont-actp\">全部</p></li><li class=\"tab-head-item\"><p onclick=\"ClickQuizXuan(2,this)\" class=\"quiz-cont-p\">王者荣耀</p></li><li class=\"tab-head-item\"><p onclick=\"ClickQuizXuan(3,this)\" class=\"quiz-cont-p\">LOL</p></li><li class=\"tab-head-item\"><p onclick=\"ClickQuizXuan(4,this)\" class=\"quiz-cont-p\">绝地求生</p></li><li class=\"tab-head-item\"><p onclick=\"ClickQuizXuan(5,this)\" class=\"quiz-cont-p\">守望先锋</p></li></ul></div>
.quiz-cont {width: 100%;border-top: 1px solid #F8F8F8;border-bottom: 1px solid #F8F8F8;}.tab-head {width: 100%;list-style-type: none;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-flex-wrap: nowrap;-ms-flex-wrap: nowrap;flex-wrap: nowrap;-webkit-box-pack: justify;-webkit-justify-content: space-between;-ms-flex-pack: justify;justify-content: space-between;padding: 0;overflow: auto;background: #363942;}.tab-head::-webkit-scrollbar {display: none;}.tab-head-item {-webkit-box-flex: 1;-webkit-flex: 1 0 auto;-ms-flex: 1 0 auto;flex: 1 0 auto;width: 25%;display: flex;justify-content: center;align-items: center;padding: 10px 0px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.tab-head-item p {font-weight: 400;font-size: 12px;color: white;padding: 0px 10px;}.quiz-cont .quiz-cont-actp {background: #F9D630;border-radius: 11px;color: #333;}
