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位于一个单独的文件中，并包含在一个bootstrap容器中的主文件中，如下所示：

<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
中删除已修复的nav ul li

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

1 个答案: