Question

我没有太多编码技巧。所以我想知道如何使用css和html在Google上使用这个菜单栏？ Click here to see sample image of Google menu bar

仅供参考：我发现了这个......它是一样的吗？

<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来表示导航栏。 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>

如何制作可水平滚动（在移动设备上）的菜单栏？

1 个答案: