水平導(dǎo)航欄是網(wǎng)頁設(shè)計中常見的一種導(dǎo)航布局，通常用于網(wǎng)站的主導(dǎo)航欄或者子菜單。在使用HTML和CSS實現(xiàn)水平導(dǎo)航欄時，首先需要定義一個包含導(dǎo)航鏈接的HTML列表元素，然后使用CSS設(shè)置樣式將其水平排列。

<ul class="navbar">
<li><a href="#">首頁</a></li>
<li><a href="#">產(chǎn)品</a></li>
<li><a href="#">服務(wù)</a></li>
<li><a href="#">關(guān)于我們</a></li>
</ul>

上面的代碼是一個包含4個導(dǎo)航鏈接的無序列表，其中每個鏈接用<a>標(biāo)簽包含，<li>標(biāo)簽則代表一個列表項。接下來，我們使用CSS設(shè)置樣式將列表項水平排列：

.navbar {
list-style: none; /*去除列表點標(biāo)記*/
padding: 0; /*去除內(nèi)邊距*/
margin: 0; /*去除外邊距*/
display: flex; /*使用Flex布局*/
}
.navbar li {
margin-right: 20px; /*設(shè)定列表項之間的間距*/
}
.navbar li:last-child {
margin-right: 0; /*去除最后一個列表項的間距*/
}
.navbar a {
color: #333; /*設(shè)置鏈接文字顏色*/
text-decoration: none; /*去除鏈接下劃線*/
font-size: 16px; /*設(shè)定鏈接文字大小*/
}

上面的代碼使用Flex布局將UL列表元素的子元素設(shè)置為水平排列，去除了內(nèi)外邊距和列表標(biāo)記。接著，再設(shè)置了列表項之間的間距和最后一個列表項的間距，最后為鏈接文字設(shè)定了顏色、下劃線和大小等樣式。

通過以上的CSS設(shè)置，我們就可以將一個簡單的HTML列表轉(zhuǎn)換成水平導(dǎo)航欄，以方便用戶在網(wǎng)站中進(jìn)行導(dǎo)航，增加用戶體驗。