css - float 菜单项，如果它们在屏幕上

Question

如果菜单有超过 7 个菜单项且分辨率为 1600 x 900 像素，则 e. G。第 8 个菜单项不再完全显示。

Demo-Page

如果菜单项的分辨率不够，我如何让菜单项 float 在第二行？

Answer 1

ul.menu {
  background-color: #333;
  overflow: auto;/*Remove if need multiple lines*/
  white-space: nowrap;/*Remove if need multiple lines*/
}

ul.menu li {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

ul.scrollmenu a:hover {
  background-color: #777;
}

<ul class="menu">
  <li><a href="#home">FAIR-TEILER</a></li>
  <li><a href="#home">FAIR-TEILER</a></li>
  <li><a href="#home">FAIR-TEILER</a></li>
  <li><a href="#home">FAIR-TEILER</a></li>
  <li><a href="#home">FAIR-TEILER</a></li>
  <li><a href="#home">FAIR-TEILER</a></li>
  <li><a href="#home">FAIR-TEILER</a></li>
  <li><a href="#home">FAIR-TEILER</a></li>
  <li><a href="#home">FAIR-TEILER</a></li>
  <li><a href="#home">FAIR-TEILER</a></li>
  <li><a href="#home">FAIR-TEILER</a></li>
  <li><a href="#home">FAIR-TEILER</a></li>
  <li><a href="#home">FAIR-TEILER</a></li>
  <li><a href="#home">FAIR-TEILER</a></li>
  <li><a href="#home">FAIR-TEILER</a></li>
</ul>