CSS导航栏问题：如何移除div内元素间距并实现居中对齐

问题根源 #

你代码里两个设置导致了多余间距：

• 给每个.items元素设置了flex-grow: 1，导致每个p标签都会平分导航栏除logo外的所有宽度，每个p内部单独居中文字，文字之间自然会产生等于单个p宽度的空白
• p标签自带浏览器默认的外边距，也会额外增加间距
  同时你在flex布局里写的float: left完全不生效，可以直接删掉。

修复方案 #

调整HTML结构，把所有导航项放到同一个容器里，再修改对应CSS即可：

修改后完整代码 #

<div class="navbar">
  <h1 class="logo">ab</h1>
  <!-- 新增导航项包裹容器 -->
  <div class="nav-items-wrap">
    <p class="items">O nás</p>
    <p class="items">Reference</p>
    <p class="items">Blog</p>
  </div>
</div>

<style>
  .navbar{
    margin: 30px;
    padding: 10px;
    height: 100px;
    background: red;
    display: flex;
    /* 让logo和右侧容器垂直居中对齐 */
    align-items: center;
  }

  .navbar .logo{
    font-size: 50px;
    /* 重置h1默认margin，避免错位 */
    margin: 0;
  }

  /* 新增包裹容器样式 */
  .nav-items-wrap{
    flex-grow: 1;
    height: 100%;
    background: blueviolet;
    display: flex;
    /* 导航项整体水平居中 */
    justify-content: center;
    /* 导航项垂直居中 */
    align-items: center;
    /* 按需调整导航项之间的间距，比如8px */
    gap: 8px;
  }

  .navbar .items{
    /* 重置p默认margin */
    margin: 0;
  }
</style>

效果说明 #

修改后所有导航文本会作为一个整体在紫色区域内居中，你可以通过调整.nav-items-wrap的gap属性自由控制文本之间的间距，不会再出现多余空白。

内容的提问来源于stack exchange，提问作者RitchyCZE