要讓巡覽列橫著一排排列，可以使用CSS的Flexbox佈局。 下麵是一個簡單的例子，展示了如何實現這一效果。
首先，HTML部分：
html複製程式碼<；！ DOCTYPE html>； <； html lang=“； 以及"； >； <； 頭部>； <； 元字元集=“； UTF-8“ >； <； meta name=“； 視點 內容=“； width=設備寬度，初始比例=1.0英寸； >； <； title>； 水准導航 /title>； <； 連結rel=“； 樣式表 href=“； styles.css”； >； <； 頭部>； <； 身體>； <； 不>； <； ul類=“； 導航清單”； >； <； class=“； 項目"； >； <； a href=“； #家"； >； 主頁<； a>； <； /li>； <； class=“； 項目"； >； <； a href=“； #關於"； >； 關於<； a>； <； /li>； <； class=“； 項目"； >； <； a href=“； #服務"； >； 服務<； a>； <； /li>； <； class=“； 項目"； >； <； a href=“； #聯系"； >； 連絡人<； a>； <； /li>； <； /l>； <； /否>； <； 身體>； <； /html>；
然後，CSS部分：
css複製程式碼/* styles.css */body { font-family: Arial， sans-serif； }nav { background-color: #333; }.nav-list { display: flex; /* 使用 flexbox 佈局 */ list-style: none； /* 移除默認清單樣式 */ padding: 0； /* 移除內邊距 */ margin: 0； /* 移除外邊距 */}.nav-item { margin: 0； /* 確保列表項沒有額外的間距 */}.nav-item a { display: block； /* 使連結佔據整個列表項 */ padding: 15px 20px； /* 內邊距 */ color: white； /* 文字顏色 */ text-decoration: none； /* 移除連結底線 */}.nav-item a:hover { background-color: #575757； /* 懸停效果 */}在這個例子中：
沒有一個元素是巡覽列的容器。
ul.nav-list使用了顯示器：柔性；將其子元素按一行排列。
li.nav-item是每個導航項，它們在美國內水准排列。
一元素的樣式確保了連結看起來美觀，並在懸停時有視覺迴響。
這樣，巡覽列中的各個項目就會橫向排列。 你可以根據需要進一步調整樣式。