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

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; 
  } 
  

编辑

经过几次的评论还需要删除固定width from nav ul li