使用CSS Grid制作导航栏遇阻：元素定位问题求助

我帮你找到了几个关键问题，这就是你的导航栏不按网格规则对齐的核心原因：

1. 无效的CSS类名：数字开头的类名不合法 #

CSS语法明确规定，类名不能以纯数字开头（比如你写的.1、.2、.3），浏览器根本无法解析这类选择器，所以你设置的grid-column定位规则完全没被应用。

2. 拼写错误的CSS属性 #

你写了align-text: center;，但这个属性是不存在的，要实现文本居中，正确的属性是text-align: center;。

3. 可选优化：网格列定位的写法可以更清晰 #

虽然grid-column: 5这种写法能生效，但明确写成grid-column: 5 / 6（表示从第5列网格线到第6列网格线）会让代码可读性更强，也更符合网格布局的标准写法。

修正后的完整代码 #

HTML部分

<body> 
<nav class="container"> 
<div class="nav-item home"> 
<a href="#intro">home</a> 
</div> 
<div class="nav-item work"> 
<a href="#work">work</a> 
</div> 
<div class="nav-item contact"> 
<a href="#contact">contact</a> 
</div> 
</nav>

CSS部分

body { 
  font-family: 'Roboto', sans-serif; 
  font-size: 14px; 
  margin: 0; 
  padding: 0; 
} 

a { 
  text-decoration: none; 
} 

nav.container { 
  display: grid; 
  grid-template-columns: repeat(12, 1fr); 
  grid-template-rows: 1fr; 
  height: 100px; 
  background: #e59033; 
  align-items: center; 
  text-align: center; /* 修正属性名 */
  border: 1px solid #000; 
} 

.container > div:nth-child(odd){ 
  background: #000; 
  padding:1em; 
} 

/* 使用合法的类名设置网格定位 */
.nav-item.home { 
  grid-column: 5 / 6; 
} 

.nav-item.work { 
  grid-column: 6 / 7; 
} 

.nav-item.contact { 
  grid-column: 7 / 8; 
}

这些修改完成后，你的导航栏元素就会按照12列网格的规则，精准定位在第5、6、7列的位置，并且文本也能正确居中啦。

内容的提问来源于stack exchange，提问作者Jenson Varghese