如何使导航栏在移动设备上不重叠

Question

当我将网站切换到移动视图时，创建的导航栏会重叠。

我尝试使其适合内容，但仍然重叠。重叠的部分是列出的项目

#navBar {
  overflow: hidden;
  text-align: center;
  border-top: double black 2px;
}

#navBar ul {
  padding: 0;
  list-style: none;
  width: fit-content;
}

#navBar li {
  display: inline;
  padding-top: 23px;
  position: relative;
}

#navBar a {
  font-size: 20px;
  padding-right: 20px;
  text-decoration: none;
  text-align: center;
  border: 4px solid lime;
  padding-bottom: 10px;
  padding-top: 20px;
  padding-left: 10px;
  font-family: American Typewriter, serif;
  color: #262626;
  text-transform: uppercase;
  border-radius: 0px 0px 25px 25px;
}

#navBar a:hover {
  color: lime;
}

#navBar a::before {
  content: '';
  display: block;
  height: 5px;
  width: 100%;
  background-color: lime;
  position: absolute;
  top: 0;
  width: 0%;
  transition: all ease-in-out 250ms;
}

#navBar::hover::before {
  width: 100%;
}

<nav id="navBar">
  <div class="bar">
    <ul>
      <li><a href="test1.php">Tab1</a></li>
      <li><a href="test2.php">Tab2</a> </li>
      <li> <a href="test3.php">Tab3</a></li>
    </ul>
  </div>
</nav>

我希望导航栏项目可以并排放置，但实际结果会重叠。

Answer 1

您可以为此使用inline-flex

更改

#navBar ul {
  padding: 0;
  margin: 0; /* reset margin */
  list-style: none;
  width: fit-content;
}

#navBar li {
  display: inline-flex; /* change to inline-flex and remove the padding */
  position: relative;
}

#navBar {
  overflow: hidden;
  text-align: center;
  border-top: double black 2px;
}

#navBar ul {
  padding: 0;
  margin: 0;
  list-style: none;
  width: fit-content;
}

#navBar li {
  display: inline-flex;
  position: relative;
}

#navBar a {
  font-size: 20px;
  padding-right: 20px;
  text-decoration: none;
  text-align: center;
  border: 4px solid lime;
  padding-bottom: 10px;
  padding-top: 20px;
  padding-left: 10px;
  font-family: American Typewriter, serif;
  color: #262626;
  text-transform: uppercase;
  border-radius: 0px 0px 25px 25px;
}

#navBar a:hover {
  color: lime;
}

#navBar a::before {
  content: '';
  display: block;
  height: 5px;
  width: 100%;
  background-color: lime;
  position: absolute;
  top: 0;
  width: 0%;
  transition: all ease-in-out 250ms;
}

#navBar::hover::before {
  width: 100%;
}

<nav id="navBar">
  <div class="bar">
    <ul>
      <li><a href="test1.php">Tab1</a></li>
      <li><a href="test2.php">Tab2</a> </li>
      <li> <a href="test3.php">Tab3</a></li>
    </ul>
  </div>
</nav>