要讓導航欄橫著一排排列，可以使用CSS的flexbox布局。下面是一個簡單的例子，展示了如何實現這一效果。
首先，HTML部分：
html復制代碼<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Horizontal Navigation</title> <link rel="stylesheet" href="styles.css"></head><body> <nav> <ul class="nav-list"> <li class="nav-item"><a href="#home">Home</a></li> <li class="nav-item"><a href="#about">About</a></li> <li class="nav-item"><a href="#services">Services</a></li> <li class="nav-item"><a href="#contact">Contact</a></li> </ul> </nav></body></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; /* 懸停效果 */}在這個例子中：
nav 元素是導航欄的容器。
ul.nav-list 使用了 display: flex; 將其子元素按一行排列。
li.nav-item 是每個導航項，它們在 ul 內水平排列。
a 元素的樣式確保了鏈接看起來美觀，并在懸停時有視覺反饋。
這樣，導航欄中的各個項目就會橫向排列。你可以根據需要進一步調整樣式。