列表的两端对齐布局_两端对齐什么样子

产品：“哎你这个文字跟设计的不一样啊，居中了吗，怎么有的地方那么大空啊？”

本尊：“前端页面就这样，没有两端对齐，改不了…（一副不耐烦的样子）”

（想想当初这么说的我也是蛮屌的，之前的公司为什么没开除我呢….）

这里我还得解释一下，因为我是半路出家嘛，学习初期也遇到过这种问题，也有过这种疑问，于是就跑去问带我的人，他就揍是这么回我的!

好了，原委说完了，接下来学习~

一、什么是列表元素的两端对齐布局

首先说说何为两端对齐。下面这个截图是word中一段英文左对齐的右边缘截图：

可以看到右侧是参差不起的，现在，选中文字，点击word上方的两端对齐按钮，如下图：

结果文字的右边缘就成了这样：

右侧完全对齐了，也就是整篇文字全部沿着左边缘和右边缘对齐显示了。

二、如何实现元素的两端对齐

CSS2中text-align有一个属性值为justify，为对齐之意。其实现的效果就是可以让一行文字两端对齐显示（文字内容要超过一行）。

text-align其诞生的意义是控制文字的对齐与显示的，从其属性名上就可以看出来。从其渲染与解析上来看，其主要是用来控制inline水平元素或inline-block元素的对齐与显示的，例如嵌套行内标签的文字、图片、input表单控件等；而对block水平的元素是没有作用的。

所以，对于列表元素，理论上，我们只要将原本block水平的列表元素inline化或是inline-block化就可以轻松实现其两端对齐了。然而考虑到实际情况，inline水平化显然是不可能的，因为不能给列表元素定宽定高，设置垂直方向上的间距等，列表元素就像是一摊烂泥，根本没法用来砌房子；而inline-block化也是有重重阻碍的，因为IE6/7并不真正意义上的支持inline-block属性。

可见，理论上虽简单，实际上还得从长计议。

三、目前列表元素如何实现两端对齐的

淘宝的产品列表布局使用的是传统的浮动(float)布局，通过width属性强行增大父容器的宽度来实现看上去的“两端对齐”效果的。

再看人人网热门分享的两端对齐效果的实现方法，我在之前“基于display:inline-block的列表布局”一文中已经提过，人人网这里的列表布局为inline-block布局。

其通过也是通过增大父标签的宽度来实现看上去的“两端对齐”效果的，不过其不是通过width属性来增加父标签的宽度的，而是使用的margin负值（我个人推荐使用margin负值而不是定宽）：

还有一种方法就是利用white-space: nowrap，此方法需在inline-block布局基础上使用，一般用在实现单行列表元素看上去的“两端对齐”效果上。white-space: nowrap会强制列表元素不换行，于是你无需设定父标签容器的宽度或是通过margin负值等手段增加父容器的宽度等。这里不展开，以后有机会要好好说一说white-space: nowrap这个很有用的CSS声明的。

以上就是目前几种常见的实现列表元素看上去的“两端对齐”效果方法。怎么样，是不是每个都很折腾——首先列表元素排列就已经很折腾人的了（定宽，计算间距），然后还有人为增加父容器的宽度，同时祖辈元素还要溢出隐藏(overflow:hidden)，oh，my lady嘎嘎。我想这就是为什么网上会有前端工程师咆哮体咆哮加班的原因了。

其实，这些活儿都是边喝咖啡，边看微博就可以完成的，关键使用text-align:justify来做两端对齐的布局。

四、text-align:justify实现两端对齐的好处

好处就是简单方便。只要一个简单的text-align:justify声明，里面的元素就自动等间距两端对齐布局啦！根本无需计算每个列表元素间的margin间距，更不用去修改父容器的宽度。

五、关于display:inline-block列表布局

本文的内容是基于display:inline-block列表布局。您可能注意到了，在这篇文章的最后其实已经简单提到text-align:justify下的两端对齐布局，然而，那里只是简单展示了个例子，对于一些显示上的问题（例如悲剧的最后一行），以及IE6/7浏览器以及IE8浏览器下实现的注意事项并没有详细阐述，而本文就是来解决这些问题的。

六、display:inline-block/text-align:justify下列表的两端对齐布局

了表述上逻辑清晰。我们先把IE6和IE7浏览器晾在一边，看看IE8+浏览器以及现代浏览器下如何display:inline-block+text-align:justify实现列表元素的两端对齐。

说穿了其实很简单，我们不妨以最常见的列表标签-ul, li标签举例，要实现li列表的两端对齐，直接下面这点CSS代码就OK了：

ul{text-align:justify;}
li{display:inline-block;}
1
2

简单得让人当场吐血三升。

唯一需要注意的就是列表元素首尾标签留空（或换行），如下图所示：

不仅如此，对于IE8浏览器，列表元素不能处在font-size:0的环境下，至少code>font-size:1px，因为IE8浏览器font-size:0或直接把换行空格或普通空格抹掉而无法实现两端对齐效果。

ok，下面是重头戏了，纠缠不清的IE6/IE7浏览器。显然上面的ul, li样式组合在IE6/7浏览器下是行不通的，即使你使用hack让IE6/7下的li标签有类似于display:inline-block的特性也是没有作用的。那么如何才能让IE6/7浏览器也有列表元素支持text-align:justify属性呢？经过反复试验与调试，总结了两点：inline标签化以及结束标签连续化。

1. inline标签化
   所谓“inline标签化”就是列表元素需要使用inline水平的标签，例如span, a, strong, em等，像li, div这些标签就不可以。

2. 结束标签连续化
   所谓“结束标签连续化”是指列表元素及其内部标签的结束标签需要连在一起。例如下面这个就是不行的：

<span>
    <a href="#">
        <img src="test.jpg" />
    </a>
    <span>描述</span>
</span>
1
2
3
4
5
6

而应该是这个样子滴：

<span>
    <a href="#">
        <img src="test.jpg" />
    </a>
    <span>描述</span></span>
1
2
3
4
5

我们已经习惯了结构化的缩进，所以上面结束标签连写看上去很不自然，有些别扭。但是，为了实现效果，这是没有办法的事情。注意：如果列表标签内嵌多层，则所有层级的结束标签都要连续。

E6/IE7浏览器同时满足上面的inline标签化以及结束标签连续化，再加上先前现代浏览器下的首尾标签留空，IE6/IE7浏览器也就能够实现列表元素的两端对齐啦！

为了便于更直观的知道各个浏览器下实现两端对齐效果需要注意的事项：

然而，现在还有一个很悲剧的问题没有解决，就是当列表元素最后一行无法两端对齐的悲剧。

其实这个问题很好解决的。

如何悲剧变喜剧？
列表（或文字）要两端对齐的前提就是内容必须超过一行，所以，要解决最后一行元素无法两端对齐的文字其实很简单，就是在列表（或文字段）的最后创建一个高度为0的宽度100%的透明的inline-block的标签层就可以了，例如：

.justify_fix{display:inline-block; width:100%; height:0; overflow:hidden;}
1

如下HTML：

<span class="justify_fix"></span>
1

例如拿先前最后一行列表悲剧的demo举例，现在在该demo列表最后添加上面类名为justify_fix的span元素，结果最后一行两端对齐排列了

很多时候，我们希望列表的最后一行是左对齐排列的，而不是两端对齐，这时候怎么办呢？原理与上面的两端对齐一致。就是复制几个列表元素的外层标签，等宽，但高度为0，里面就是个 (不可缺)，复制的个数一般就是每行元素的列表个数啦，这样肯定可以保证最后一行元素一定是左对齐排列的啦！

如下HTML代码：

<div class="box">
    <span class="list"><img data-src="1.jpg" />
biubiubiu~~~~</span>
    <span class="list"><img data-src="2.jpg" />
金木金木~~</span>
    .
    .
    .
    <span class="list left_fix">&nbsp;</span>
    <span class="list left_fix">&nbsp;</span>
    <span class="list left_fix">&nbsp;</span>
    <span class="list left_fix">&nbsp;</span>
    <span class="list left_fix">&nbsp;</span>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

上面HTML中的left_fix样式如下：

.left_fix{height:0; padding:0; overflow:hidden;}
1

结果先前等宽对齐的最后三个图片就与上面元素垂直对齐且左对齐啦！

于是，综合上面所有讨论，我们就可以相对比较完美地实现列表元素在text-align:justify的两端对齐效果了。