菜单

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

2015-01-29 - 优秀原创

by zhangxinxu

一、何为列表元素的两端对齐布局

首先说说何为两端对齐。下面这个截图是word中一段英文左对齐的右边缘截图:
word中文字左对齐截图 张鑫旭-鑫空间-鑫生活

可以看到右侧是参差不起的,现在,选中文字,点击word上方的两端对齐按钮,如下图:
点击word中两端对齐按钮 张鑫旭-鑫空间-鑫生活

结果文字的右边缘就成了这样:
word中两端对齐效果截图 张鑫旭-鑫空间-鑫生活

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

然后这里的“列表元素”指的是具有类似结构的重复列表元素,例如QQ校友中的图片列表:
列表布局示意 张鑫旭-鑫空间-鑫生活

所谓列表元素的两端对齐就是每行列表元素的第一个元素与父容器的左边缘重合,最后一个元素与父容器的右边缘重合。例如淘宝首页的热卖单品,或是人人网的热门分享列表(如下截图):
人人网热门分享列表两端对齐 张鑫旭-鑫空间-鑫生活

转载请注明: 转载自—艾瑞可erik

本文链接地址: http://erik.xyz/702.html

页面: 1 2 3 4 5 6 7

标签:, ,

发表评论