創(chuàng)建橫排導(dǎo)航是Web開發(fā)中的一個常見需求，使用div和CSS可以實現(xiàn)這一功能，以下是一個簡單的教程，幫助你快速掌握如何使用div和CSS創(chuàng)建橫排導(dǎo)航。

HTML結(jié)構(gòu)

我們需要一個基本的HTML結(jié)構(gòu)來承載我們的導(dǎo)航鏈接，我們可以使用div元素來創(chuàng)建一個容器，然后在這個容器里放置我們的鏈接。

<div id="navbar">
    <a href="#">鏈接1</a>
    <a href="#">鏈接2</a>
    <a href="#">鏈接3</a>
    <a href="#">鏈接4</a>
    <a href="#">鏈接5</a>
</div>

CSS樣式

我們需要使用CSS來讓導(dǎo)航鏈接水平排列，我們可以通過設(shè)置display屬性為inline-block來實現(xiàn)這一點，我們還可以添加一些其他樣式來美化我們的導(dǎo)航條。

#navbar {
    display: flex;
    justify-content: flex-start;
    padding: 0;
    list-style-type: none;
}
#navbar a {
    display: inline-block;
    padding: 10px;
    margin: 0 5px;
    text-decoration: none;
    color: #333;
    border-bottom: 2px solid transparent;
}
#navbar a:hover {
    color: #000;
    border-bottom: 2px solid #000;
}

實現(xiàn)效果

我們的橫排導(dǎo)航已經(jīng)完成了，鏈接們會水平排列，并且當(dāng)我們鼠標(biāo)懸停在鏈接上時，鏈接的顏色和底部邊框顏色都會變成黑色，我們還可以進(jìn)一步調(diào)整樣式來適應(yīng)我們的網(wǎng)站設(shè)計。