讓導航橫著一排排列css怎麼寫

要让导航栏横着一排排列，可以使用CSS的flexbox布局。下面是一个简单的例子，展示了如何实现这一效果。

首先，HTML部分：

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 内水平排列。

• 一 元素的样式确保了链接看起来美观，并在悬停时有视觉反馈。

这样，导航栏中的各个项目就会横向排列。你可以根据需要进一步调整样式。