关于display:inline-block问题总结
来源:互联网 发布:淘宝助理怎么选类目 编辑:程序博客网 时间:2024/06/04 19:50
问题一:内联块之间会有一小段空白。
原因:两个有内联元素性质的div之间的空格
解决方式:
(1)不换行
(2)加注释<!---->
(3)取消标签闭合,但最后一个要加(兼容)
(4)给父容器加font-size:0,子元素另行设置
(5)父元素Letter-spacing:-3px,子元素letter-spacing:0
(6)父元素Word-spacing:-6px,子元素letter-spacing:0
(7)设置左边的margin为负值
问题二:当两个块的内容高度不相同时,两个块就会错位。
原因:所有的内联块都有一个默认的属性,vertical-align:baseline。baseline是块中内容的底线,而内容高度不同,因此它们会错位。
解决方式:设置vertical-align的属性值为top、middle和bottom中的一个。
阅读全文
0 0
- 关于display:inline-block问题总结
- 关于display inline-block的对齐问题
- 关于display:inline-block
- 关于 display:inline-block
- 关于display:inline-block
- 关于 display: inline 、block 、inline-block
- 关于 display: inline 、block 、inline-block (一)
- 关于 display: inline 、block 、inline-block (二)
- 关于 display: inline 、block 、inline-block
- display: inline-block间隙问题
- display:inline-block 间距问题
- display: inline-block换行问题
- 关于display: inline-block 默认空白间距的问题
- 关于IE7的display:inline-block失效问题
- H5面试——display:inline-block问题总结
- css display:block inline-block 问题
- 关于display:inline、block、inline-block的区别
- display:inline display:block
- Java常见设计模式
- 【刷题剑指offer】两个链表的第一个公共节点
- ActiveMQ发送消息出现连接失效问题
- 用递归函数实现十进制转换为十六进制输出
- JS DOM 节点
- 关于display:inline-block问题总结
- [vijos 1684]丢失的筷子
- Linux系统多网卡绑定实战
- @Repository、@Service、@Controller 和 @Component
- 安卓手机通讯录导入至iPhone中简单教程
- Dijkstral算法--单源最短路
- SpringIOC机制
- 读取项目配置文件获取盘符
- 南师附中集训 七日游(划掉)总结