在設計整個頁面風格的時候，導航欄占據了非常重要的位置。為了讓整個導航欄看起來更加整齊美觀，我們往往會把每個導航的平均寬度設置得相同。下面我們就來看一下如何使用CSS實現每個導航平均寬度的效果。

.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布局，實現每個導航平均寬度的方法都非常簡單，只需要對每個導航設置彈性系數或者列寬即可。這樣不僅可以讓導航欄看起來更加美觀，同時也能提高用戶體驗，更加方便用戶的導航操作。