时间戳

首页 > 解决方案 > css 网格单元格中的 Flexbox 项目似乎换行了

html - css 网格单元格中的 Flexbox 项目似乎换行了

问题描述

我是使用 css 网格的新手，我正在尝试使用 flexbox 在单个网格单元格中定位两个项目来定位项目。左边有一个标志，右边有一个导航栏，但导航栏不在单元格“a”内居中，它似乎低于单元格“a”的下边界（我试图上传一个jpeg图像，但 Stack Overflow 目前在接受图片上传时遇到问题，请参阅Image upload failed with "imgur is denied the request"）。

这是html代码： 

<div class="a">

<div class="a_left">
Logo for Project
</div>

<div class="a_right">
<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>
</div>

</div>

这是css代码： 

.a{
    display: grid;
    font-family: sans-serif;
    color: green;
    font-size: 16pt;
}

.a_left{
    display: flex;
    text-align: left;
    vertical-align: left;
    flex-wrap: nowrap;
}

.a_right{
    display: flex;
    height: 100%;
    flex-wrap: nowrap;
    justify-content: right;
    vertical-align: right;
}

.topnav {
    align-content: right;
    justify-content: center;
    overflow: hidden;
    background-color: #333;
    height: 100%
}

网格容器是“a”，导航栏在 a_right flexbox 中。我已经尝试了很多可能的高度、宽度和居中属性，但没有成功，但我不知道该属性是否应该应用于 a 或 a_right。

感谢您为这个导航栏提供任何帮助。

标签： htmlcssflexboxcss-grid

解决方案

如果您想在左侧有徽标，在右侧有菜单，您可以简单地执行以下操作：

.a {
  display: flex;
  justify-content: space-between;
}
<div class="a">
  <div class="a_left">
    Logo for Project
  </div>
  <div class="a_right">
    <div class="topnav">
      <a class="active" href="#home">Home</a>
      <a href="#news">News</a>
      <a href="#contact">Contact</a>
      <a href="#about">About</a>
    </div>
  </div>
</div>

推荐阅读