Apache Echarts 5 线上发布会

inline-block

Text-align:Justify和RWD

项目列表两端对齐,给一些同学带来了很多困惑,我在群里也时常看到有人问这样的布局问题,记得很早前在《如何在Drupal中避免重复列末尾的Margin》中有做过一点简单的介绍。后来在张旭鑫的博客中,找到两篇《display:inline-block/text-align:justify下列表的两端对齐布局》《拜拜了,浮动布局-基于display:inline-block的列表布局》中介绍了使用text-align:justify和display:inline-block实现两端对齐。受益无穷。但随着响应式布局的出现,这样的布局又提出一个新的要求,要实现响应式布局,最近邮箱常收到的《Text-align: Justify and RWD》一文,觉得蛮好的,特译成中文与大家共享,希望大家喜欢。

如何解决inline-block元素的空白间距

有关于使用inline-block来代替float的讨论也蛮多的,最常说的就是使用inline-block来代替float进行布局,或者使用inline-block来实现元素的居中效果。前面《CSS3制作的分页导航》一文中就是使用的inline-block制作的居中效果,不过留下了一上问题,就是使用inline-block的元素之间会存在“4px”的空白间距。那么今天我们就一起来说说这个“4px”的问题。

大家首先来看一个DEMO

返回顶部