[分享]css中如何设置水平导航条

在网页设计中，水平导航条是一个非常重要的组成部分。通过设置CSS样式，我们可以使导航栏看起来更加美观，并且提升用户的操作体验。下面我们来学习一下在CSS中如何设置水平导航条。首先，我们需要给导航栏的父...

在网页设计中，水平导航条是一个非常重要的组成部分。通过设置CSS样式，我们可以使导航栏看起来更加美观，并且提升用户的操作体验。下面我们来学习一下在CSS中如何设置水平导航条。
首先，我们需要给导航栏的父元素设置一个display属性为flex的样式。这会使得子元素在同一行上水平排列，使导航栏看起来更加整齐。

<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>