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

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

大家首先来看一个DEMO：