html列堆叠不并排

Question

大家好，我想了解为什么我的列是堆叠在一起而不是并排。

我的目标是让我的食谱组件位于页面中心，并使我的杂货侧边栏与食谱组件对齐。

这是网站目前的样子。我试图让切换侧栏按钮与食谱组件内联

这是我的主要应用程序 html：

<div class="row">
    <div class="recipe-column">
        <recipes></recipes>
    </div>
    <div class="grocery-column">
        <app-grocery-sidebar></app-grocery-sidebar>

    </div>
</div>

这是主要的应用 css

  .column {
    float: left;
  }
  
  /* Clear floats after the columns */
  .row:after {
    content: "";
    clear: both;
  }

  .recipe-column{
      float:left;
      padding-left:10%;
  }

  .grocery-column{
      float:left;
  }

我的目标是让配方组件占据整个页面，并让左上角的“切换 sidenav”按钮与导航栏保持一致。因此，如果有人对如何完成此操作有任何想法，请告诉我。

额外问题：我也不知道如何将导航栏推送到页面顶部，我不喜欢那个空间。所以，如果你知道如何做到这一点，我很想听听。

Answer 1

您可以尝试编辑掉clear:both;。对于导航栏上方的空间，您可以尝试margin:0px; padding:0px;。