Html CSS导航栏-如何均匀地隔开元素

导航栏元素中心的空间不相等。CSS似乎还允许文本与其他元素重叠，例如，如果我写“HOMEabcdefgh”，它将与下一个元素重叠，而不是均匀地隔开

此外，主文本比其他元素文本短，因此我们看到它和下一个元素“连衣裙”之间有很大的间距。我想均匀地隔开所有的中心元素。请看图片

*{
保证金：0；
填充：0；
框大小：边框框；
颜色：#b7b7；
}
身体{
背景色：黑色；
}
标题{
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
填充：10px 10%；
背景色：#332323；
}
.标志{
光标：指针；
颜色：白色；
字体大小：大号；
}
.导航链接a{
显示：内联块；
宽度：20%；
左：3%；
右：10%；
光标：指针；
左边框：1px纯白；
右边距：30px；
文本转换：大写；
列表样式类型：无；
}
李{
最小宽度：80px；
}
.按钮{
背景色：#302b2b；
填充：5px10%；
颜色：白色；
}

N

您可以为ul显示器提供：flex，中间有空间

ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

*{
保证金：0；
填充：0；
框大小：边框框；
颜色：#b7b7；
}
身体{
背景色：黑色；
}
标题{
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
填充：10px 10%；
背景色：#332323；
}
.标志{
光标：指针；
颜色：白色；
字体大小：大号；
}
.导航链接a{
宽度：自动；
光标：指针；
左边框：1px纯白；
文本转换：大写；
列表样式类型：无；
左侧填充：15px；
右侧填充：15px；
}
保险商实验室{
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
}
.按钮{
背景色：#302b2b；
填充：5px10%；
颜色：白色；
}

N

您需要给导航增加一些宽度，然后在导航链接上使用flex box。 我删除了所有你的填充锚宽度和边距

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #b7b7b7;
  }
  
  body {
    background-color: black;
  }
  
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10%;
    background-color: #332323;
  }
  
  .logo {
    cursor: pointer;
    color: white;
    font-size: large;
  }
   /** Give the nav a width */
  .nav1{
      width:20%;
  }
  /** Set the flex properties */
  .nav_links{
    display: flex;
    justify-content: space-between;
  }
  .nav_links a {
    display: inline-block;
    cursor: pointer;
    text-transform: uppercase;
    list-style-type: none;
  }
  
  .button {
    background-color: #302b2b;
    padding: 5px 10%;
    color: white;
  }

---

您可以在导航上使用内部flexbox。另外，在

元素上有HREF，这是不需要的。您可以直接将链接添加到

，它将根据需要对齐链接，因为它本身也在flexbox中，间隔均匀

*{
保证金：0；
填充：0；
框大小：边框框；
颜色：#b7b7；
}
身体{
背景色：黑色；
}
标题{
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
填充：10px 10%；
背景色：#332323；
}
.标志{
光标：指针；
颜色：白色；
字体大小：大号；
}
导航{
显示器：flex；
flex-flow：行nowrap；
对正内容：空间均匀；
}
导航a{
文本对齐：居中；
光标：指针；
左边框：1px纯白；
文本转换：大写；
文字装饰：无；
填充：0.25雷姆0.5雷姆；
}
.按钮{
背景色：#302b2b；
填充：5px10%；
颜色：白色；
}

N