wordpress 手机端十格导航

css代码

@media screen and (max-width:768px) {
	.newmrxu_link {
	margin:0 auto;
	background:#fff;
	border-radius:12px;
}
.mrxu_link {
	padding:5px;
}
.mrxu_link dl dd {
	display:inline-block;
	width:18%;
	margin-bottom:10px;
	margin-top:10px;
}
.mrxu_link dl dd a {
	display:block;
}
.mrxu_link dl dd a i {
	display:block;
	width:30px;
	height:30px;
	margin:0 auto 5px;
}
.mrxu_link dl dd a p {
	height:20px;
	line-height:20px;
	font-size:12px;
	color:#666;
	text-align:center;
	overflow:hidden;
}
dl {
	display:flex;
	justify-content:center;
}
    .mrxu_link dl dd.xu_link_1 i {
    	background: url(/wp-content/themes/b2child_S9/Assets/images/6fb53c51539b47559cf0d122a832cf63.png) center no-repeat;
    	background-size: 30px;
    }
    .mrxu_link dl dd.xu_link_2 i {
    	background: url(/wp-content/themes/b2child_S9/Assets/images/ce315c2c3a253ae480f3bc5d21f466fd.png) center no-repeat;
    	background-size: 30px;
    }
    .mrxu_link dl dd.xu_link_3 i {
    	background: url(/wp-content/themes/b2child_S9/Assets/images/8785f87831a49ec5ba53c349547f4afd.png) center no-repeat;
    	background-size: 30px;
    }
    .mrxu_link dl dd.xu_link_4 i {
    	background: url(/wp-content/themes/b2child_S9/Assets/images/7ee18f46c1124a317e50c8a0b873c281.png) center no-repeat;
    	background-size: 30px;
    }
    .mrxu_link dl dd.xu_link_5 i {
    	background: url(/wp-content/themes/b2child_S9/Assets/images/ba34bbc4534db00b68b17e8eb2d1c05d.png) center no-repeat;
    	background-size: 30px;
    }
    .mrxu_link dl dd.xu_link_6 i {
    	background: url(/wp-content/themes/b2child_S9/Assets/images/5426ece23cd64730a1342f1dc5f2323c.png) center no-repeat;
    	background-size: 30px;
    }
    .mrxu_link dl dd.xu_link_7 i {
    	background: url(/wp-content/themes/b2child_S9/Assets/images/d5fd454aeec7ab3bef4cbff55663dbb4.png) center no-repeat;
    	background-size: 30px;
    }
    .mrxu_link dl dd.xu_link_8 i {
    	background: url(/wp-content/themes/b2child_S9/Assets/images/71972a3300d1a94cec4a85d3f6435ece.png) center no-repeat;
    	background-size: 30px;
    }
    .mrxu_link dl dd.xu_link_9 i {
    	background: url(/wp-content/themes/b2child_S9/Assets/images/84b9a38a7edddfbe3fc7842ddfdb0fb3.png) center no-repeat;
    	background-size: 30px;
    }
    .mrxu_link dl dd.xu_link_10 i {
    	background: url(/wp-content/themes/b2child_S9/Assets/images/e37c2dccef84f2640b42ac2254855c5e.png) center no-repeat;
    	background-size: 30px;
    }
}

html

<div class="mrxu_link newmrxu_link"><dl><dd class="xu_link_1"><a href="#"><i></i><p>关注</p></a></dd><dd class="xu_link_2"><a href="/vips"><i></i><p>会员</p></a></dd><dd class="xu_link_3"><a href="/cxym"><i></i><p>资源</p></a></dd><dd class="xu_link_4"><a href="/stream"><i></i><p>热榜</p></a></dd><dd class="xu_link_5"><a href="/circle"><i></i><p>星球</p></a></dd></dl><dl><dd class="xu_link_6"><a href="/task"><i></i><p>任务</p></a></dd><dd class="xu_link_7"><a href="/verify"><i></i><p>认证</p></a></dd><dd class="xu_link_8"><a href="/shop"><i></i><p>购物</p></a></dd><dd class="xu_link_9"><a href="/distribution"><i></i><p>赚钱</p></a></dd><dd class="xu_link_10"><a href="/mission"><i></i><p>签到</p></a></dd></dl></div>

html代码我压缩过，你们去找网站格式化一下就好了