Question

如何去掉输入hello导致的菜单栏和侧边栏之间的空格。

我试过了 display:inline-block; 和 overflow:hidden; 去掉了之前存在的空白，现在用颜色填充。我还尝试获取内容 div 并移动它，使其不是 .sidebar 的父级（？），但随后“你好”最终出现在页面底部。我想让“你好”文本保持在黄色区域的中心，而侧边栏和菜单栏之间没有空格。

Picture of the website

.menucontain{
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;
    grid-column-gap:5px;
    color:#F2F0D0;
    text-align:center;
    background-color:#204959;
    font-family:helvetica;
    padding:15px;
  }
    .sidebar{
      background:#204959;
    width:18%;
    height:800px;
    text-align:center;
    color:#F2F0D0;
    font-family:helvetica;
    display:grid;
    grid-template-rows: repeat(6 ,50px);
    grid-gap:2px;
     }
    .side1{
    background:gray;
    padding-top:15px;
      }
   
  .content{
    background-color:#F2F0D0;
    text-align:center;
    overflow:hidden;
      }

<div class="menucontain">

  <div class="menu1">Menu1</div>
<div class="menu2">Menu2</div>
 <div class="menu3">Menu3</div>
 <div class="menu4">Menu4</div>
 <div class="menu5">Menu5</div>
<div class="menu6">Menu6</div>
  <!--menu contain div on next line-->
</div>
  
  <div class="content">
    <p>hello</p>

<div class="sidebar">
  <div class="side1">About</div>
  <div class="side1">Blog</div>
  <div class="side1">Sales</div>
  <div class="side1">Partners</div>
  <div class="side1">Portfolio</div>
  <div class="side1">Contact</div>
  </div>   
  </div>

Answer 1

p 标签是一个块元素，要删除空间，你必须从 'content' 类中删除

hello <\p>

在“内容”类上使用弹性显示或网格显示

Answer 2

这是您问题的正确解决方案。

首先，为侧边栏依次移动标记<p>。像这样：

...
<div class="sidebar">
        <div class="side1">About</div>
        <div class="side1">Blog</div>
        <div class="side1">Sales</div>
        <div class="side1">Partners</div>
        <div class="side1">Portfolio</div>
        <div class="side1">Contact</div>
    </div>

    <p>hello</p>
...

其次，通过将其添加到您的 css 中，为 .content 类分配 grid 规则：

.content {
    display: grid;
    grid-template-columns: 18% 1fr;
}

并从 width: 18% 选择器中移除宽度规则 - .sidebar。因为我们在上面的 grid 规则中将宽度定义为 18%。

.menucontain {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-column-gap: 5px;
    color: #f2f0d0;
    text-align: center;
    background-color: #204959;
    font-family: helvetica;
    padding: 15px;
}

.content {
    display: grid;
    grid-template-columns: 18% 1fr;
}

.sidebar {
    background: #204959;
    /*width: 18%;*/
    height: 800px;
    text-align: center;
    color: #f2f0d0;
    font-family: helvetica;
    display: grid;
    grid-template-rows: repeat(6, 50px);
    grid-gap: 2px;
}

.side1 {
    background: gray;
    padding-top: 15px;
}

.content {
    background-color: #f2f0d0;
    text-align: center;
    overflow: hidden;
}

<div class="menucontain">
    <div class="menu1">Menu1</div>
    <div class="menu2">Menu2</div>
    <div class="menu3">Menu3</div>
    <div class="menu4">Menu4</div>
    <div class="menu5">Menu5</div>
    <div class="menu6">Menu6</div>
    <!--menu contain div on next line-->
</div>

<div class="content">
    <div class="sidebar">
        <div class="side1">About</div>
        <div class="side1">Blog</div>
        <div class="side1">Sales</div>
        <div class="side1">Partners</div>
        <div class="side1">Portfolio</div>
        <div class="side1">Contact</div>
    </div>

    <p>hello</p>
</div>

Answer 3

通过将主体声明为网格，将 3 个不同的部分（菜单包含、侧边栏、内容）重新整合到一个网格中。由于您已经使用网格来设计 menucontain 和侧边栏的样式，因此您必须将它们切换到子网格。

body {
  margin: 0;
  display: grid;
  grid-template-columns: 18vw auto;
  grid-template-rows: min-content auto;
  min-height: 100vh;
}

.menucontain {
  grid-column: span 2;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: subgrid;
  grid-column-gap: 5px;
  color: #F2F0D0;
  text-align: center;
  background-color: #204959;
  font-family: helvetica;
  padding: 15px;
}

.sidebar {
  background: #204959;
  height: 800px;
  text-align: center;
  color: #F2F0D0;
  font-family: helvetica;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: repeat(6, 50px);
  grid-gap: 2px;
}

.side1 {
  background: gray;
  padding-top: 15px;
}

.content {
  background-color: #F2F0D0;
  text-align: center;
  overflow: hidden;
}

<div class="menucontain">
  <div class="menu1">Menu1</div>
  <div class="menu2">Menu2</div>
  <div class="menu3">Menu3</div>
  <div class="menu4">Menu4</div>
  <div class="menu5">Menu5</div>
  <div class="menu6">Menu6</div>
</div>

<div class="sidebar">
  <div class="side1">About</div>
  <div class="side1">Blog</div>
  <div class="side1">Sales</div>
  <div class="side1">Partners</div>
  <div class="side1">Portfolio</div>
  <div class="side1">Contact</div>
</div>

<div class="content">
  <p>hello</p>
</div>

如何摆脱菜单栏和侧面导航之间的空间？

3 个答案: