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

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"> <a href="###" target="_blank"><img src="123.jpg" alt="" /></a> <a href="###" target="_blank">xiaoming</a> <a href="###" target="_blank">xiaoming</a> <a href="###" target="_blank"><img src="123.jpg" alt="" /></a> <a href="###" target="_blank">xiaoming</a> <a href="###" target="_blank">xiaoming</a> <a href="###" target="_blank"><img src="123.jpg" alt="" /></a> <a href="###" target="_blank">xiaoming</a> <a href="###" target="_blank">xiaoming</a> <a href="###" target="_blank"><img src="logo2.jpg" alt="" /></a> <a href="###" target="_blank">xiaoming</a> <a href="###" target="_blank">xiaoming</a> <a href="###" target="_blank"><img src="logo2.jpg" alt="" /></a> <a href="###" target="_blank">xiaoming</a> <a href="###" target="_blank">xiaoming</a> <a href="###" target="_blank"><img src="logo2.jpg" alt="" /></a> <a href="###" target="_blank">xiaoming</a> <a href="###" target="_blank">xiaoming</a> <a href="###" target="_blank"><img src="123.jpg" alt="" /></a> <a href="###" target="_blank">xiaoming</a> <a href="###" target="_blank">xiaoming</a> <a href="###" target="_blank"><img src="logo2.jpg" alt="" /></a> <a href="###" target="_blank">xiaoming</a> <a href="###" target="_blank">xiaoming</a> <a href="###" target="_blank"><img src="123.jpg" alt="" /></a> <a href="###" target="_blank">xiaoming</a> <a href="###" target="_blank">xiaoming</a> <a href="###" target="_blank"><img src="123.jpg" alt="" /></a> <a href="###" target="_blank">xiaoming</a> <a href="###" target="_blank">xiaoming</a> <a href="###" target="_blank"><img src="123.jpg" alt="" /></a> <a href="###" target="_blank">xiaoming</a> <a href="###" target="_blank">xiaoming</a>   /*inlinebox{display:inline-block;width:105px;padding-bottom:20px;}justify_fix{height:0;padding:0;overflow:hidden;vertical-align:top;}*/           </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> 换成行内元素 第二个问题：列表结束标签连续第一个列表元素结束 第三个问题: 一个列表结束，换行，不连续*/

转载于:https://blog.51cto.com/linkui/804452

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

[CSS]详解display:inline | block |inline-block的区别
2019独角兽企业重金招聘Python工程师标准>>> [CSS]详解display:inline | block |inline-block的区别[点评网站][发布新闻][申请专栏 ...
display:inline、block、inline-block
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
两端对齐布局与text-align:justify
百分比实现首先最简单的是使用百分比实现,如下一个展示列表: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta char ...
chrome css两端对齐,两端对齐布局与text-align:justify
百分比实现首先最简单的是使用百分比实现,如下一个展示列表: .list{ width: %; background: #f0f0f9; list-style: none; font-size: ; ...
display的block、none、inline属性及解释
常会用到display对应值有block.none.inline这三个值参数: block :块对象的默认值.用该值为对象之后添加新行.之前也添加一行. none :隐藏对象.与visibility ...
display:inline、block、inline-block的区别
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
display:inline、block、inline-block的区别以及该死的ie6兼容问题
2019独角兽企业重金招聘Python工程师标准>>> display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...
display:inline inline-block block
块级元素:默认设置display:block的元素<div>.<h1>~<h6>..<ul>.<ol>.<li> ...
CSS中display：block、inline、inline-block
display:block的特点: 1.block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. 2.block元素可以设置width,heig ...

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

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

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

最新文章

热门文章