CSS橫排導(dǎo)航欄是網(wǎng)頁設(shè)計中常見的元素。它可以幫助用戶快速導(dǎo)航到網(wǎng)站的不同頁面。下面是一個基本的CSS橫排導(dǎo)航欄的代碼示例：

/* 導(dǎo)航欄樣式 */ .navbar { display: flex; /* 使用flex布局 */ flex-direction: row; /* 橫向排列 */ justify-content: space-between; /* 將導(dǎo)航項分布在整個導(dǎo)航欄中間 */ align-items: center; /* 垂直居中對齊 */ height: 50px; /* 導(dǎo)航欄固定高度 */ background-color: #333; /* 導(dǎo)航欄背景顏色 */ color: #fff; /* 導(dǎo)航欄字體顏色 */ } /* 導(dǎo)航項樣式 */ .navitem { padding: 0 20px; /* 導(dǎo)航項左右內(nèi)邊距 */ height: 100%; /* 導(dǎo)航項高度與導(dǎo)航欄高度一致 */ display: flex; /* 使用flex布局 */ justify-content: center; /* 導(dǎo)航項內(nèi)部子元素居中對齊 */ align-items: center; /* 導(dǎo)航項內(nèi)部子元素垂直居中對齊 */ } /* 鼠標(biāo)懸停樣式 */ .navitem:hover { background-color: #555; /* 導(dǎo)航項背景顏色改變 */ }

在這個代碼示例中，我們使用了flex布局來創(chuàng)建橫排導(dǎo)航欄。我們首先定義了.navbar元素（即導(dǎo)航欄容器）的樣式。我們將其設(shè)為flex布局并使用justify-content和align-items屬性對子元素進(jìn)行水平和垂直居中對齊。我們還設(shè)置了導(dǎo)航欄高度和背景顏色，以及字體顏色。

然后，我們定義了.navitem元素（即導(dǎo)航項容器）的樣式。每個導(dǎo)航項都具有相同的高度，并使用flex布局對它們內(nèi)部的子元素進(jìn)行水平和垂直居中對齊。我們還使用padding屬性為每個導(dǎo)航項添加左右內(nèi)邊距。

最后，我們?yōu)槭髽?biāo)懸停狀態(tài)定義了導(dǎo)航項的樣式。在這種狀態(tài)下，我們改變其背景顏色來引起用戶的注意。

通過使用這個基本的CSS橫排導(dǎo)航欄代碼，你可以創(chuàng)建一個簡單且易于使用的導(dǎo)航欄，以幫助用戶快速導(dǎo)航到你的網(wǎng)站的不同頁面。