如何在移动菜单栏上制作水平滚动(在移动)菜单栏上

Question

我没有太多的编码技巧。因此，我想知道如何使用CSS和HTML在Google上完全制作菜单栏？单击此处查看Google菜单栏的示例图像

fyi：我找到了这个..是否相同？

<div style="width: 300px; height: 40px; border: 1px solid black; overflow: auto; white-space: nowrap; font-size: 14px">
    menu1 | menu2 | menu3 | menu4 | menu5 | menu6 | menu7 | menu8
</div>

Answer 1

我不会使用其中没有元素的DIV来表示您的Navbar。DIV内部的文字并不意味着任何意义。尝试更多类似的东西，您想使用<a>标签：

nav {
  display: flex;
  padding: 10px;
  border: 1px solid #000;
  min-width: 300px;
  overflow: auto;
}
a {
  margin-right: 14px;
  position: relative;
  text-decoration: none;
}
a:not(:last-of-type):after {
  content: '';
  display: block;
  height: 14px;
  width: 1px;
  margin: auto;
  background-color: #000;
  position: absolute;
  top: 0;
  bottom: 0;
  right: -7px;
}

<nav>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
  <a href="#">Link 5</a>
  <a href="#">Link 6</a>
</nav>