无法使用CSS网格缩小项目

时间:2018-06-29 10:05:39

标签: javascript html css flexbox grid

我看到了这个CSS网格菜单,并试图对其进行修改,以使项目变小而没有空格,但是我没有成功,有人知道该怎么做吗?

nav {
  display: grid;
  grid-template-columns: repeat(5, auto);
  grid-gap: 10px;
}
  
  a {
    background-color: red;
    color: #fff;
    text-decoration: none;
    padding: 10px 0;
    text-align: center;
    box-sizing: border-box;
  }
<nav>
  <a href="">Home</a>
  <a href="">About</a>
  <a href="">Work</a>
  <a href="">Blog</a>
  <a href="">Contact</a>
</nav>

3 个答案:

答案 0 :(得分:0)

x或y上的“较小”是什么意思?您可以尝试以下方法:

nav {
  display: grid;
  grid-template-columns: repeat(5, auto);
  grid-gap: 0px;
}
  
  a {
    background-color: red;
    color: #fff;
    text-decoration: none;
    padding: 2px;
    text-align: center;
    box-sizing: border-box;
  }
<nav>
  <a href="">Home</a>
  <a href="">About</a>
  <a href="">Work</a>
  <a href="">Blog</a>
  <a href="">Contact</a>
</nav>

答案 1 :(得分:0)

grid-gap:设置为0px;

nav {
  display: grid;
  grid-template-columns: repeat(5, auto);
  grid-gap: 0px;
}

a {
  background-color: red;
  color: #fff;
  text-decoration: none;
  padding: 10px 0;
  text-align: center;
  box-sizing: border-box;
}
<nav>
  <a href="">Home</a>
  <a href="">About</a>
  <a href="">Work</a>
  <a href="">Blog</a>
  <a href="">Contact</a>
</nav>

希望这就是您想要的。

答案 2 :(得分:-2)

更好地使用内联代码块

nav {
  display: inline-block;
}
  
  a {
    background-color: red;
    color: #fff;
    text-decoration: none;
    padding: 10px;
    text-align: center;
    box-sizing: border-box;
  }
<nav>
  <a href="">Home</a>
  <a href="">About</a>
  <a href="">Work</a>
  <a href="">Blog</a>
  <a href="">Contact</a>
</nav>