【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>

渲染效果:

相关推荐
siwangqishiq222 分钟前
Vulkan Tutorial 教程翻译(四) 绘制三角形 2.2 呈现
前端
李三岁_foucsli24 分钟前
js中消息队列和事件循环到底是怎么个事,宏任务和微任务还存在吗?
前端·chrome
尽欢i24 分钟前
HTML5 拖放 API
前端·html
PasserbyX40 分钟前
一句话解释JS链式调用
前端·javascript
1024小神41 分钟前
tauri项目,如何在rust端读取电脑环境变量
前端·javascript
Nano1 小时前
前端适配方案深度解析:从响应式到自适应设计
前端
古夕1 小时前
如何将异步操作封装为Promise
前端·javascript
小小小小宇1 小时前
前端定高和不定高虚拟列表
前端
古夕1 小时前
JS 模块化
前端·javascript
wandongle1 小时前
HTML面试整理
前端·面试·html