如何避免导航栏元素重叠

Question

我正在使用php在网站上包含导航栏。调整浏览器大小时，我希望导航栏中的单词不要重叠。这是我的HTML:

<div class="nav-container">
  <nav>
    <ul>
      <li>
        <a  class='active' data-scroll-nav='0'>Home</a>
      </li>
      <li>
        <a data-scroll-nav='1'>Projects</a>
      </li>
      <li>
        <a data-scroll-nav='2'>LP</a>
      </li>
      <li>
        <a data-scroll-nav='3'>Contact</a>
      </li>
    </ul>
  </nav>
</div>

这是我的CSS：

.nav-container {
  background-color: rgba(0, 0, 0, 0);
  width: 100%;
  position: fixed;
}
nav {
  text-align: center;
  width: 50%;
  margin: 0px auto; 
}
nav ul {
      padding: 0px; 
    }
nav li {
    width: 24%;
    display: inline-block; 
}
    nav li a {
        font-size: 16px;
        color: white; 
        font-family: Market;
    }
   nav li a.active {
       color: black; 
       text-decoration: none;
       font-size: 200%;
   }
   nav li a.hover{
  text-decoration: none; 
  color: #c8c8a9;
   } 

html在一个单独的文件中，包含在引导容器内的主文件中，如下所示：

<div class="container">
 <?php
include("header.php"); 
 ?>

Answer 1

您可以尝试以下操作：

• 首先让你的物品永远不会断线：

  .nav-container nav ul {
      white-space:nowrap;
  }
  

• 两套min-width:

  .nav-container nav ul li {
      min-width:55px;
  }
  

编辑

在一些注释之后，还需要从nav ul li 中删除固定的width