css每个导航平均宽度 |css3点击事件穿透效果

.nav {
display: flex;
justify-content: space-between;
}
.nav a {
flex: 1;
text-align: center;
}

上面的代码中，大家首先将导航栏的父级元素设置为flex布局，并且把每个导航都设置为1的弹性系数。这样每个导航就会平均分配空间，并且占据相同的宽度。如果还希望导航文字水平居中，大家可以再为每个导航设置text-align:center。

除了以上方法，大家还可以使用grid布局来实现导航平均宽度的效果。代码示例如下：

.nav {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
.nav a {
text-align: center;
}

在这种方法中，大家使用了grid-template-columns属性来声明导航栏的列数和每列的宽度。其中，repeat(auto-fit, minmax(100px, 1fr))表示自动适应，并且每列的最小宽度为100px，最大宽度为1fr。这样导航栏就会自动调整每列的宽度，保证每个导航平均分配空间。同样的，大家也需要给每个导航设置text-align:center来水平居中。

总之，无论是使用flex布局还是grid布局，实现每个导航平均宽度的方法都非常简单，只需要对每个导航设置弹性系数或者列宽即可。这样不仅可以让导航栏看起来更加美观，同时也能提高用户体验，更加方便用户的导航操作。