display:inline-block+text-align:justify实现列表元素的两端对齐。

2011-09-21 08:49:22 
 display:inline-block+text-align:justify实现列表元素的两端对齐。
1.什么是列表元素？何谓列表元素的两端对齐？
列表元素指的是具有类似结构的重复列表元素。列表元素的两端对齐就是每行列表元素的第一个元素与父容器的左边缘重合，最后一个元素与父容器的右边缘重合。例如淘宝首页的热卖单品，如图1.1所示：
1.1 淘宝热卖单品 现在来看下我们现阶段是如何来处理列表元素的两端对齐的 首先看下图1.2.1所示，便一目了然，很明显，我们采用了无序列表标签ul，li，采用了浮动法，再设置内边距，外边距，再定死标题的高度，看下图，左右两端还是不对齐，内边距，外边距，margin：10px 25px 0 8px，这样的数字，很明显，我们是通过计算，计算出来的，或者是通过不间断的调试，调试出来的数字。显而易见，出来的效果，左右边距相对父元素，还不算两端对齐，如果没定死高度，标题的字数太长，溢出的部分则会被溢出，这非常考验编辑的标题文字浓缩能力，如果不定死高度，列表的高度超出其他的列表的高度，其他列表则会向右浮动，这样列表元素无法排列开来。 1.2.1大洋旅游某专题 看下上面的红色字体，你看出什么来了吗？左边相对父元素是29px，右边相对父元素是32px，显然两端不对齐了，咱们再看下代码，设置了margin，列表元素设置了右边8px，左边25px，也定死了高度180px。如果以后的浏览器的宽度变化了呢？或者这个模块的宽度需要再修改，不说203px，而是240px呢，那修改的时间是多么漫长和无趣。 1.2.2大洋旅游某专题 再看下大洋美食首页，我把高度height:20px去掉，标题里面再写多点文字，你瞧，下面的图片都向右边浮动了。这就是我想分析的第三点，咱们不用float：left来处理列表元素的对齐，至于为什么，请看第三点 1.2.3大洋美食首页 3为什么不使用float？ Float 浮动的局限：每个列表元素的高度必须要一致，否则就会像是俄罗斯方块一样，“锯齿相错”，例如一个左浮动列表布局，如果第一行有个列表高度高于其他列表，那就在第二行，第一个元素会沿着最高元素的右侧对齐，使用display-block包裹元素，无疑是一个很好的办法。 4.现在咱们就来看看如何写出无浮动，无计算，无需反复对着不同浏览器调试，扩展性良好的两端对齐的代码 首先看下效果图，界面如下图所示，你所看到的页面，两端对齐，当一个列表元素的高度比其他元素高的时候，它不会跳到第二行。 首先先看下效果图，界面如下图所示，你所看到的页面，两端对齐，当一个列表元素的高度比其他元素高的时候，它不会跳到第二行。 再看看代码： 自动两端对齐，少了设置左右边距，少了计算和调试的时间。 这是代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <style type="text/css"> .linebox{text-align:justify;margin:20px auto;padding:20px;background-color:#dedede;width:50%} .inlinebox{display:inline-block;width:105px;padding-bottom:20px;vertical-align:top;} .justify_fix{padding:0;height:0;overflow:hidden;} .inlinebox a img{width:105px;overflow:hidden;} </style> </HEAD> <BODY> <div class="linebox"> <span class="inlinebox"> <a href="###" target="_blank"><img src="123.jpg" alt="" /></a> <span><a href="###" target="_blank">xiaoming</a></span> <span><a href="###" target="_blank">xiaoming</a></span></span> <span class="inlinebox"> <a href="###" target="_blank"><img src="123.jpg" alt="" /></a> <span><a href="###" target="_blank">xiaoming</a></span> <span><a href="###" target="_blank">xiaoming</a></span></span> <span class="inlinebox"> <a href="###" target="_blank"><img src="123.jpg" alt="" /></a> <span><a href="###" target="_blank">xiaoming</a></span> <span><a href="###" target="_blank">xiaoming</a></span></span> <span class="inlinebox"> <a href="###" target="_blank"><img src="logo2.jpg" alt="" /></a> <span><a href="###" target="_blank">xiaoming</a></span> <span><a href="###" target="_blank">xiaoming</a></span></span> <span class="inlinebox"> <a href="###" target="_blank"><img src="logo2.jpg" alt="" /></a> <span><a href="###" target="_blank">xiaoming</a></span> <span><a href="###" target="_blank">xiaoming</a></span></span> <span class="inlinebox"> <a href="###" target="_blank"><img src="logo2.jpg" alt="" /></a> <span><a href="###" target="_blank">xiaoming</a></span> <span><a href="###" target="_blank">xiaoming</a></span></span> <span class="inlinebox"> <a href="###" target="_blank"><img src="123.jpg" alt="" /></a> <span><a href="###" target="_blank">xiaoming</a></span> <span><a href="###" target="_blank">xiaoming</a></span></span> <span class="inlinebox"> <a href="###" target="_blank"><img src="logo2.jpg" alt="" /></a> <span><a href="###" target="_blank">xiaoming</a></span> <span><a href="###" target="_blank">xiaoming</a></span></span> <span class="inlinebox"> <a href="###" target="_blank"><img src="123.jpg" alt="" /></a> <span><a href="###" target="_blank">xiaoming</a></span> <span><a href="###" target="_blank">xiaoming</a></span></span> <span class="inlinebox"> <a href="###" target="_blank"><img src="123.jpg" alt="" /></a> <span><a href="###" target="_blank">xiaoming</a></span> <span><a href="###" target="_blank">xiaoming</a></span></span> <span class="inlinebox"> <a href="###" target="_blank"><img src="123.jpg" alt="" /></a> <span><a href="###" target="_blank">xiaoming</a></span> <span><a href="###" target="_blank">xiaoming</a></span></span> <span class="inlinebox justify_fix">&nbsp;</span> /*inlinebox{display:inline-block;width:105px;padding-bottom:20px;}justify_fix{height:0;padding:0;overflow:hidden;vertical-align:top;}*/ <span class="inlinebox justify_fix">&nbsp;</span> <span class="inlinebox justify_fix">&nbsp;</span> <span class="inlinebox justify_fix">&nbsp;</span> <span class="inlinebox justify_fix">&nbsp;</span> <span class="inlinebox justify_fix">&nbsp;</span> </div> </BODY> </HTML> 4.下面就来分析如何实现两端对齐??需要用到两个属性，text-align:justify 和display:inline-block； Text-align:justify 实现两端对齐，从其属性来说，是来控制文字的对齐与显示的，从其渲染与解析上来看，其主要是用来控制inline水平元素或inline-block元素的对齐与显示的，例如嵌套行内标签的文字、图片、input表单控件等；而对block水平的元素是没有作用的。 对于列表元素，将原本block水平的列表元素inline化或是inline-block化就可以轻松实现其两端对齐了。然而考虑到实际情况，inline水平化显然是不可能的，因为不能给列表元素定宽定高，设置垂直方向上的间距等，IE6/7并不真正意义上的支持inline-block属性。对于IE8+以及现代浏览器，直接使用：{display:inline-block;}对于不支持的IE6/7浏览器该怎么办呢？如果是inline水平的元素（如a标签，span标签之类）跟上面一样，直接：{display:inline-block;}如果是block水平的元素，例如li标签。则需要多点代码，如下所示：li {display:inline-block;...}li {display:inline;}或者是li{display:inline; zoom:1;...} 使用inline-block的阻挠：两个不在一行的img标签，形成的两个图片之间就会有间隙， 第一种方法：让列表的结束标签与下一个列表的开始标签连在一起，HTML代码的可读性很不好。 第二种方法：font-size:0;可以解决换行符导致的一像素的问题，但是Chrome不支持font-size:0， 第三种方法：不妨试一试letter-spacing来去除间隙，但是，Opera浏览器下极限是间隙1像素，0像素会反弹，换行符间隙还原 第四方法：font-size:0;letter-spacing：-4px;两种属性相结合 经过分析，总结如下： » block水平的元素inline-block化后，IE6/7没有换行符间隙问题，其他浏览器均有；» inline水平的元素inline-block后，所有主流浏览器都有换行符/空格间隙问题；» font-size:0，去除换行符间隙，在IE6/7下残留1像素间隙，Chrome浏览器无效，其他浏览器都完美去除；» letter-spacing负值可以去除所有浏览器的换行符间隙，但是，Opera浏览器下极限是间隙1像素，0像素会反弹，换行符间隙还原 6.最后一行显示上不对齐问题的解决方法：inline标签化以及结束标签连续化 所谓“inline标签化”就是列表元素需要使用inline水平的标签，例如span, a, strong, em等，所谓“结束标签连续化”是指列表元素及其内部标签的结束标签需要连在一起。 /*需要注意的事项*/ /*第一个问题：以前写列表元素两端的对齐 是<ul><li></li><li></li><li></li><li></li></ul> 现在必须把<li> 换成行内元素 <span> 第二个问题：列表结束标签连续 第一个列表元素结束</span> 第三个问题: 一个列表结束，换行，不连续*/