css中如何设置水平导航条

<pre><br>
nav {<br>
    display: flex;<br>
}<br> 

<pre>nav a {
    display: block; /* 块级元素 */
    text-align: center; /* 文字居中 */
    padding: 14px 20px; /* 上下各留14px,左右各留20px */
    margin: 0 10px; /* 左右各留10px */
    text-decoration: none; /* 去掉下划线 */
    color: #333; /* 设置字体颜色 */
}

nav a:hover {
     color: #fff;
     background-color: #f40;
}
        
nav a.active {
     color: #f40; /* 当前选项字体颜色 */
} 

<pre><br>
nav {<br>
     display: flex;<br>
     justify-content: space-between;<br>
     align-items: center;<br>
     height: 60px;<br>
     background-color: #f4f4f4;<br>
     position: fixed;<br>
     top: 0;<br>
     left: 0;<br>
     right: 0;<br>
}<br>

.logo {<br>
     font-size: 24px;<br>
     font-weight: bold;<br>
     color: #333;<br>
     margin-left: 20px;<br>
}<br>