Php 如何防止导航栏元素重叠？

我正在使用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>

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

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

---

您可以尝试以下方法：

• 首先，确保您的物品永远不会出现断线：

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

• 两组a

  最小宽度

  ：

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

编辑

---

在几篇评论之后，还需要从

nav ul li

中删除固定的

宽度？答案在bootstrap文档中（因为您正在使用它）：您的努力在哪里？我没有使用bootstrap进行导航。我尝试过使用最小宽度为320px的媒体查询，但没有效果。我只是尝试了一下，当它达到320px时，它仍然重叠。然后增加最小宽度：70px，只有当活动列表项的字体大小不是200%时，它才起作用。当单词变大时，有没有办法让它们彼此清除？例如，当该列表项处于活动状态时，即当前页面上该项的字体大小加倍。？仅当活动列表项的字体大小不是200%时？我不明白你真正需要的是什么，你的菜单从来不会有重叠的项目。当你在某个特定的页面上，我更改了代码，使字体变大。然而，当屏幕尺寸小于320px时，它会与下一个单词重叠。
.nav-container nav ul li {
    min-width:55px;
}