在網(wǎng)頁(yè)設(shè)計(jì)中，導(dǎo)航欄是一個(gè)非常重要的組件。在很多情況下，為了更好的展示，我們需要將導(dǎo)航欄設(shè)置為橫行，下面就讓我們來學(xué)習(xí)如何使用 HTML 實(shí)現(xiàn)這種效果。

<ul>
<li><a href="#">首頁(yè)</a></li>
<li><a href="#">新聞</a></li>
<li><a href="#">產(chǎn)品</a></li>
<li><a href="#">關(guān)于我們</a></li>
<li><a href="#">聯(lián)系我們</a></li>
</ul>

在這段代碼中，我們使用了一個(gè)無序列表標(biāo)簽 <ul>，來創(chuàng)建導(dǎo)航欄。其中每個(gè)導(dǎo)航鏈接使用列表項(xiàng)標(biāo)簽 <li> 包裹，使用超鏈接標(biāo)簽 <a> 來實(shí)現(xiàn)鏈接。注意，這里我們沒有設(shè)置標(biāo)簽的樣式，只是用 HTML 結(jié)構(gòu)來構(gòu)建了一個(gè)基本的導(dǎo)航欄。

接下來，我們需要使用 CSS 來設(shè)置導(dǎo)航欄的橫排效果。

/* 消除默認(rèn)樣式 */
ul {
padding: 0;
margin: 0;
list-style-type: none;
}
/* 設(shè)置橫向?qū)Ш?*/
li {
display: inline-block;
float: none;
}

在這段代碼中，我們首先使用一些常用的 CSS 屬性來取消默認(rèn)的樣式。然后，我們使用了 display: inline-block; 將列表項(xiàng)變成行內(nèi)塊級(jí)元素，實(shí)現(xiàn)橫向排列的效果。同時(shí)，我們也將浮動(dòng)設(shè)置為 none，以防止列表項(xiàng)在一定分辨率下出現(xiàn)換行的問題。

綜上，我們通過簡(jiǎn)單的 HTML 結(jié)構(gòu)和 CSS 樣式，就可以實(shí)現(xiàn)一個(gè)簡(jiǎn)單的橫向?qū)Ш綑?。?dāng)然，我們也可以使用更加豐富的樣式來美化導(dǎo)航欄，讓網(wǎng)站更加具有吸引力。