Html 在元素之间添加空格

发布于02月16日

我有一个.nav-bar元素，它是一个具有属性的子元素

display:flex; 
justify-content:space-evenly

当我设置header元素(它是属性的父元素)时，.nav-bar元素的子项往往会聚集在一起.

display:flex; 
justify-content:space-between;

但是，从标题中删除Display属性似乎部分解决了这个问题. 此外，在使用.nav-bar元素中的Gap属性时，子项之间的间隔似乎也很好.这是为什么？

<!----CSS--FILE---->
    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .nav-bar {
      list-style: none;
      display: flex;
      gap: 3rem;
    }

<!--javascript-file-->

    <header>
      <img src="https://picsum.photos/id/237/200/300" width="40px" />
      
      <ul className="nav-bar">
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </header>

<!-- end snippet -->

推荐答案

您需要在您的HTML中用类替换类名称.你仍然可以在你的导航栏中均匀地使用空格.(你也可以给你的.nav-bar设置一个宽度:100%，让它们覆盖整个可用空间)

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

.nav-bar {
  width:100%;
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  gap: 3rem;
}

<header>
  <img src="https://picsum.photos/id/237/200/300" width="40px" />
  
  <ul class="nav-bar">
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</header>