如何防止導航欄元素重疊？

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