包含li的非语义CSS框架

Question

我使用unsemantic作为响应式框架。我在页脚菜单中有一些li，完全适合桌面版的一行。

由于一些奇怪的原因，当我调整浏览器大小时，它显示移动版本 - 然后再次调整大小以便我查看桌面版本 - 底部的ul，有一些正在包装的li。

菜单HTML

<nav id="the-footer-menu">
 <ul>
  <li><a href="home">Home</a></li>
  <li><a href="about">About</a></li>
  <li><a href="philosophy">Philosophy</a></li>
  <li><a href="services">Services</a></li>
  <li><a href="testimonials">Testimonials</a></li>
  <li><a href="home">FAQs</a></li>
 </ul>
</nav>

桌面CSS

#the-footer-menu ul li {
font-size: 13px;
padding: 0 10px;
border-right: 1px solid #fff;
float: left;
}

移动CSS

@media screen and (max-width: 767px){
 #the-footer-menu ul{text-align: center;}
 #the-footer-menu ul li{display: inline-block;float: none;}
}