要让导航栏横着一排排列，可以使用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 元素的样式确保了链接看起来美观，并在悬停时有视觉反馈。
这样，导航栏中的各个项目就会横向排列。你可以根据需要进一步调整样式。