苹果手机safari浏览器出现这种问题,怎么办呢,请指教一下

小弟平时有空就搞一个导航网站,学习一下HTML和CSS。电脑和安卓手机显示正常,但是在苹果手机safari浏览器出现这种问题,请使用苹果手机官方的safari浏览器打开以下链接就会出现第一个和第三个方框的内容不按照顺序排列,有多个空格隔开。请问怎样解决呢?谢谢大神指教!http://www.katesite.com/sousuo.html

ul改成flex布局+换行,li记得加高度就行


类似这样:
ul {
display: flex;
display: -webkit-flex;
justify-content: space-between;
flex-direction: row;
flex-wrap: wrap;
}

li {
margin-right: 5px;
width: calc(20% - 5px);
height: 30px;
}