css导航横向排列 |css dl

nav {
display: flex;
justify-content: center;
}
nav ul {
display: flex;
list-style-type: none;
}
nav ul li {
margin: 0 10px;
}
nav a {
text-decoration: none;
color: #333;
transition: all 0.3s;
}
nav a:hover {
color: #fff;
background-color: #333;
padding: 5px 10px;
border-radius: 5px;
}

CSS导航横向排列的实现需要使用flex属性，将导航的ul元素设置为display:flex，使其子元素横向排列并居中显示。同时设置ul元素的list-style-type: none，消除无序列表的默认样式。在li元素中设置margin值，使导航按照一定的距离间隔排列。

在导航中使用a标签作为子元素，设置其text-decoration:none，消除下划线；color:#333，设置字体颜色；transition:all 0.3s，添加动画效果。在:hover伪类中，可以对a标签做出颜色、背景、边框等效果。

通过CSS导航横向排列，可以使网站页面的导航更加直观、易用，提高用户的使用体验。