inline-block布局方式
2024-10-18 02:09:33
刚研究了一下inline-block布局方式
inline-block布局方式是一种比float浮动更优的一种布局方式。
一个超简单的demo
html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>inline-block布局</title>
</head>
<body>
<ul class="inline-block">
<li class="inline-block-in"><a href="#">首页</a></li>
<li class="inline-block-in"><a href="#">详情介绍</a></li>
<li class="inline-block-in"><a href="#">帮助中心</a></li>
<li class="inline-block-in"><a href="#">联系我们</a></li>
<li class="inline-block-in"><a href="#">关于我们</a></li>
</ul>
</body>
</html>
css:
<style>
ul li {
list-style: none;
font-size: 12px;
letter-spacing: normal;
padding: 0 10px;
}
.inline-block {
font-size: 0px;//inline-block 布局核心代码
letter-spacing: -8px;////inline-block 布局辅助代码,兼容safari 浏览器
}
.inline-block-in {
display: inline-block;//inline-block 布局核心代码
vertical-align: top;//inline-block 布局辅助代码
}
.inline-block-in {
*display: inline;//inline-block 布局辅助代码,兼容IE6~7
}
</style>
注意:两个display 要先后放在两个CSS声明中才有效果,这是IE的一个经典bug,如果先定义了display:inline-block,然后再将display设回 inline或block,layout不会消失。
具体应用稍后展示
最新文章
- Django基础,Day8 - 管理后台定制显示
- learn mips
- APICloud开发App总结(一)
- 关于spring中无法将service注入到servlet中的问题
- Java集合框架学习总结
- 快速上手如何使用FluentData
- August 6th, 2016, Week 32nd, Saturday
- mysql delimiter
- Spring MVC 学习笔记(整理)
- Javascript表格中搜索
- 幾種方法實現C語言Macro for debug
- ubuntu12.04安装QQ2013
- php脚本生成google play url的下载链接,下载apk并自动反编译后获取android版本号
- 项目管理实践 -- 健身小管家(Fitness housekeeper)的管理
- Java代码编写规范(不是标准规范,自行整理,无须纠结)
- javaScript事件流是什么?
- 机器学习等知识--- map/reduce, python 读json数据。。。
- mq命令帮助文档
- windows下利用nodejs压缩.min文件
- rabbitmq系列五 之远程过程调用(RPC)