Html 对齐内容使网格项占用更少的空间

我正在尝试CSS网格布局。代码如下

.navbar{
显示：网格；
背景：#000；
网格模板柱：3fr 1fr；
}
.品牌{
自我辩护：开始；
填充：1em；
字号：800；
字体样式：1.2em；
}
.项目{
显示：网格；
网格模板柱：1fr 1fr 1fr；
网格模板：1fr自动；
}
李国宝先生{
填充：1em；
列表样式类型：无；
}
纳瓦尔先生{
颜色：白色；
文本转换：大写；
文字装饰：无；
}
李：悬停{
背景：白色；
}
.navbar li:悬停>a{
颜色：黑色；
}

博客

我没有使用网格，但我使用了flex

下面的代码是我测试过的，似乎与您发布的原始代码一样有效，只是它填充了导航栏的其余部分（假设这是您想要的）

.navbar{
显示：网格；
背景：#000；
网格模板柱：1fr 1fr；
}
.品牌{
自我辩护：开始；
填充：1em；
字号：800；
字体大小：1.2米；
}
.项目{
显示：网格；
网格模板柱：1fr 1fr 1fr；
}
a{
显示器：flex；
对齐项目：居中；
证明内容：中心；
颜色：白色；
文本转换：大写；
文字装饰：无；
}
.导航栏a:悬停{
背景：白色；
颜色：黑色；
}

请注意

li

元素必须是

ol

或

ul

或

菜单

容器（）的子元素。您将它们作为

nav

和

div

的子对象。这是无效的HTML。由于您已经使用了

nav

（并且作为网格容器），我建议您删除

li

元素，使

a

元素成为子元素。Ok。谢谢你的提示。我还在学习，所以对css不太熟悉。不过有时候真的很烦人，这就解决了问题。仍然需要学习很多东西。CSS既奇怪又有趣。：）谢谢你的回答，但我想我更喜欢迈克尔的答案。

 .navbar{ 
display: flex; //this is the first layout
background: #000;
}

.brand{
padding: 1em;
font-weight: 800;
font-style: 1.2em;
background-color: green;
}

.items{
display: flex;  //this must not change as it makes sure all items can use the flexbox grid
flex: 1; //this makes it take remaining space after the brand is used
}

.navbar li{
display:flex; //this can be changed as there are no sub items requiring the flexbox grid
padding: 1em;
list-style-type: none;
}

.items li {
flex: 1; //sets each items li to be evenly spaced
}

.navbar a{
color: white;
text-transform: uppercase;
text-decoration: none;
}

.navbar li:hover{
background: white;
}

.navbar li:hover>a{
color: black;
}