css 左右横向导航

CSS 左右横向导航，是一种十分常见的网页设计布局形式。通过在页面上添加左右两侧的菜单栏，可以让用户更方便地浏览和访问网站的各个页面和功能。

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f1f1f1;
    height: 50px;
    padding: 0 20px;
}
.nav li {
    list-style: none;
}
.nav .left-menu {
    display: flex;
    align-items: center;
}
.nav .right-menu {
    display: flex;
    align-items: center;
}
    

上述 CSS 代码中，我们首先给整个导航菜单设置了一个名为 .nav 的样式，使用 flex-box 实现了左右两边的对齐。其中 justify-content: space-between; 让左右两侧菜单之间有空隙，并且让两侧菜单各占据一侧。

然后，我们分别为 .nav .left-menu 和 .nav .right-menu 两个菜单设置了样式。这里我们使用了 flex 属性来实现内部排列方式为水平方向，align-items: center; 实现了垂直方向上的居中对齐。同时，我们还为各个菜单项设置了 list-style: none; ，以去除默认的列表样式。

通过以上几行代码，我们便完成了一个基础的左右横向导航效果。当然，具体的样式和内容还需要根据实际需求进行调整和改良。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！