【css】使用float实现水平导航栏

该实例使用float 浮动实现元素浮动在水平方向,从而实现水平导航栏效果。

overflow: hidden:当不给父级元素设置高度的时候,其内部元素浮动后会导致下面的元素顶上去,这是因为子元素浮动后,子元素脱离标准流,不占位,父元素检测不到子元素的大小,从而高度为0。下面的ul要是没有添加该属性时,只显示主页,其他隐藏。

去掉overflow: hidden的效果:高度为零。

去掉overflow: hidden和添加高度的效果:

下面是添加了 overflow: hidden的代码:

xml 复制代码
<style>
ul {
  list-style-type: none;//去掉列表样式
  margin: 0;
  padding: 0;
  overflow: hidden;//这个很重要,玄学,溢出隐藏,没有这个的话,会导致只显示主页,其他隐藏
  background-color: #333;
}

li {
  float: left;//向左浮动
}

li a {
  display: inline-block;//设置行内块
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;//去掉文本装饰
}

li a:hover {
  background-color: #111;//鼠标悬浮显示样式
}

.active {
  background-color: red;//激活类样式
}
</style>
</head>
<body>

<ul>
  <li><a href="#home" class="active">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>

</body>

渲染效果:

相关推荐
花生侠14 分钟前
记录:前端项目使用pnpm+husky(v9)+commitlint,提交代码格式化校验
前端
一涯21 分钟前
Cursor操作面板改为垂直
前端
我要让全世界知道我很低调28 分钟前
记一次 Vite 下的白屏优化
前端·css
1undefined230 分钟前
element中的Table改造成虚拟列表,并封装成hooks
前端·javascript·vue.js
蓝倾1 小时前
淘宝批量获取商品SKU实战案例
前端·后端·api
comelong1 小时前
Docker容器启动postgres端口映射失败问题
前端
花海如潮淹1 小时前
硬件产品研发管理工具实战指南
前端·python
用户3802258598241 小时前
vue3源码解析:依赖收集
前端·vue.js
WaiterL1 小时前
一文读懂 MCP 与 Agent
前端·人工智能·cursor