我看到了这个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>
答案 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>