font-size对展示的影响
实例:
<head>
<style type="text/css">
span{display: inline-block;height: 15px; line-height: 15px;}
.span1{width: 3px;background-color: #ccc;}
.span2{background-color: #ccc; font-size: 12px;}
.span3{width: 2px; background-color: #ccc;}
</style>
</head>
<body>
<span>
<span class="span1"></span>
<span class="span2">aaaa</span>
<span class="span3"></span>
</span>
</body>
当设置font-size之后,原本垂直居中的三个inline-block的元素,会变的不再垂直居中。
解决方案:
1、span{display: inline-block;height: 15px; line-height: 15px; float:left;}
2、.span1{width: 3px;background-color: #ccc; vertical-align: middle;}
.span2{background-color: #ccc; font-size: 12px; vertical-align: middle;}
.span3{width: 2px; background-color: #ccc; vertical-align: middle;}
疑问:
font-size为什么会对排列展示产生影响?
最新文章
- 微信小程序-提示框
- Windows出现带空格文件名无法删除
- HTTP调试工具扩展
- IOS基础——IOS学习路线图(一)
- Linux 的使用基础---Linux的常用命令
- 百度编辑器ueditor 使用
- [RxJS] Filtering operators: skipWhile and skipUntil
- select菜单实现二级联动
- iOS 首次启动画面,新装或更新用户可以通过它查看简介。
- 基于ARM-contexA9按键驱动开发
- Vue父子组件生命过程
- python基础-字符串(6)
- Maven中POM.XML详解
- 设计模式のTemplatePattern(模板模式)----行为模式
- Navicat for Mysql连接mysql数据库时出现 2003-Can&#39;t connect to MySql server on &#39;localhost&#39;(10061)
- mybatis在控制台打印sql语句
- Go语言编程 (许式伟 等 著)
- 前端组件化Polymer入门教程(7)——Local DOM
- Oracle 用脚本安装第二个数据库
- 查看内核页表kernel_page_tables (aarch32)
热门文章
- CentOS-6.4-minimal版中安装MongoDB-x86_64-3.0.2
- DataRowState、AcceptChanges、RejectChanges综合使用示例:实现DataGridView数据的增、删、改
- windows rails new demo时候出错Make sure that `gem install mysql2 -v &#39;0.3.15&#39;` succeeds before bundling.
- 支付宝前端开源框架Alice(解决各个浏览器的样式不一致的问题)
- DirectoryEntry 账户启动与停用 以及创建账户等
- android 编译 app
- e621. Activating a Keystroke When Any Child Component Has Focus
- 使用ffmepg的lib库调试,debug版本下调试无问题,但release版本会出现跑飞的现象
- 使用什么工具连接MySQL Server
- C# 将RichTextBox中内容的文档以二进制形式存