当前位置：首页 > CSS

css制作水平导航

2026-04-02 16:31:13CSS

使用无序列表（ul）和浮动（float）

将导航项放入<ul>列表中，设置list-style: none移除默认样式，通过float: left让列表项横向排列。注意清除浮动避免布局问题。

<ul class="nav">
  <li><a href="#">首页</a></li>
  <li><a href="#">产品</a></li>
  <li><a href="#">服务</a></li>
</ul>

.nav {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #333;
  overflow: hidden; /* 清除浮动 */
}
.nav li {
  float: left;
}
.nav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
.nav li a:hover {
  background: #111;
}

使用Flexbox布局

通过display: flex容器属性实现弹性布局，justify-content控制水平对齐方式，适合现代浏览器。

.nav {
  display: flex;
  list-style: none;
  padding: 0;
  background: #333;
}
.nav li a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
}

使用inline-block显示

将列表项设置为display: inline-block，配合white-space: nowrap防止换行，需处理元素间默认间距。

.nav li {
  display: inline-block;
  margin-right: -4px; /* 消除inline-block间隙 */
}
.nav {
  white-space: nowrap;
}

响应式导航设计

结合媒体查询实现移动端折叠效果，通常通过切换display属性或使用JavaScript控制。

@media (max-width: 600px) {
  .nav li {
    float: none;
    width: 100%;
  }
}

添加视觉增强效果

使用CSS过渡或动画提升交互体验，例如下划线滑过效果。

css制作水平导航

.nav li a {
  position: relative;
}
.nav li a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 50%;
  background: white;
  transition: all 0.3s;
}
.nav li a:hover::after {
  width: 100%;
  left: 0;
}