当前位置: 首页 > news >正文

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

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

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

去掉overflow: hidden的效果:高度为零。
在这里插入图片描述
去掉overflow: hidden和添加高度的效果:
在这里插入图片描述
下面是添加了 overflow: hidden的代码:

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

渲染效果:
在这里插入图片描述

http://www.lryc.cn/news/109644.html

相关文章:

  • IDEA超强XSD文件编辑插件-XSD / WSDL Visualizer
  • Nodejs 第三章(Npm Package json)
  • Tool Documentation Enables Zero-Shot Tool-Usage with Large Language Models
  • 16 Springboot——登录功能实现
  • 数据结构-栈队列链表树
  • clickhouse功能使用
  • java中使用Jsoup和Itext实现将html转换为PDF
  • 无人驾驶实战-第七课(高精地图和V2X )
  • springboot集成Sentinel
  • 数据结构——单链表OJ题
  • 【雕爷学编程】MicroPython动手做(31)——物联网之Easy IoT
  • 《前端开发 实践之 构建工具的了解》
  • MySQL 主从搭建
  • 国内GitHub加速访问工具-Fetch GitHub Hosts
  • Webpack5新手入门简单配置
  • 基于ali-oss实现不同类型文件上传不同的bucket
  • 域名校验?反爬界的掩耳盗铃!
  • Cesium 实战教程 - 调整 3dtiles 倾斜摄影大小
  • python机器学习(七)决策树(下) 特征工程、字典特征、文本特征、决策树算法API、可视化、解决回归问题
  • 数据结构与算法中的双向链表
  • 数据安全治理的关键-数据分类分级工具
  • Spring集成Junit
  • Java正则校验密码至少包含:字母数字特殊符号中的2种
  • Stable Diffusion教程(6) - 扩展安装
  • Jenkins通过OpenSSH发布WinServer2016
  • 字母异位词分组 LeetCode热题100
  • 使用angular和electron 构建桌面应用
  • 安达发制造工业迈向智能化:APS高级计划排程助力提升生产效率
  • Flink - sink算子
  • 【项目 线程2】3.5 线程的分离 3.6线程取消 3.7线程属性