项目列表两端对齐，给一些同学带来了很多困惑，我在群里也时常看到有人问这样的布局问题，记得很早前在《如何在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又方便些。必竟有太多的理论与原由我们找不清楚（一时整不明白，或者说直到你退休也整不明白，至少我是这么认为的），与其花时间去争论他们哪个好哪个坏，还不如了解一下哪个用在什么场合适当些，这样或许能帮你解决很多实际性的问题。如果你感兴趣，就看看99为大家翻译的这篇文章《应该不应该使用inline-block代替float》。

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

大家首先来看一个DEMO：