css使导航栏水平显示

在网页制作中，导航栏是一个非常重要的元素，它能够让用户快速地找到所需的内容。而在导航栏显示上，水平导航栏和垂直导航栏是两种常见的形式。本文将介绍如何通过 CSS 实现水平导航栏。

/* HTML 代码 */ul id="nav">
        li>
    a href="#">
    首页/a>
    /li>
        li>
    a href="#">
    产品中心/a>
    /li>
        li>
    a href="#">
    解决方案/a>
    /li>
        li>
    a href="#">
    服务支持/a>
    /li>
        li>
    a href="#">
    关于我们/a>
    /li>
    /ul>
/* CSS 代码 */#nav {
        list-style: none;
        margin: 0;
        padding: 0;
        background-color: #333;
}
#nav li {
        display: inline-block;
}
#nav li a {
        display: block;
        color: #fff;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
}
#nav li:hover {
        background-color: #111;
}
     

上述代码中，首先使用 ul 和 li 标签创建导航栏列表，然后为 ul 设置了一些样式，包括去除了默认的列表样式、设置背景颜色等。接着为 li 元素设置了 inline-block 属性，让它们在同一行显示。li 元素中的 a 元素设置了一些样式，包括设置了块级元素、颜色、文本中心对齐、内边距和去除下划线。最后，通过 hover 伪类为导航栏添加了鼠标悬停时的效果。

通过上述代码，就可以实现一个简单的水平导航栏。

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