博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
布局inline-block问题
阅读量:4445 次
发布时间:2019-06-07

本文共 424 字,大约阅读时间需要 1 分钟。

当在一行中需要展示多个拥有块级属性的标签元素时,通常选择display:inline-block;

优点:不用设置浮动或定位,浮动脱离文档流还需要清除浮动,定位降低扩展性。

问题:

   1、标签元素之间会出现间隙(原因:inline-block拥有默认字体大小属性,包括标签的换行);

   2、当标签内容为空时,会造成布局错乱(原因:inline-block默认字体对齐方式是vertical-align:baseline;即底部对齐);

解决:

  间隙处理:

    1、给父级元素设置定位;

    2、元素标签不换行;

    3、父级元素的font-size:0;清除字体影响;

    4、浮动;

  布局错乱:

    1、浮动;

    2、定位;

    3、设置verticle-align:top;字体上对齐;(推荐!)

 

转载于:https://www.cnblogs.com/lyzw-Y/p/10216384.html

你可能感兴趣的文章
tomcat架构分析(valve机制)
查看>>
消息队列RabbitMQ基础知识详解
查看>>
接口、抽象类、方法复写、类Equals方法重写
查看>>
快学Scala习题解答—第十章 特质
查看>>
Ffmpeg 定位文件(seek file)
查看>>
上传图片
查看>>
Fragment与FragmentActivity的关系
查看>>
slor6.6 在linux下的安装以及启动失败解决办法
查看>>
echarts图例(legend)
查看>>
firebug中html显示为灰色的原因总结
查看>>
支持常见数据库差异对照说明
查看>>
作用域
查看>>
poj 3469 Dual Core CPU 最小割
查看>>
Javascript绝句欣赏
查看>>
(Reprint)Pessimistically or Optimistically Lock in Sql Server 2005
查看>>
vim技巧
查看>>
readonly
查看>>
Linux下安装docker
查看>>
JS 引入
查看>>
数据结构与算法随学随记
查看>>