css - 无语义的 CSS 框架，包装 li 的

Question

我使用非语义作为响应框架。我在桌面版的页脚菜单中有一些 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;}
}