• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

display:inline-block/text-align:justify教程(css两端对齐)

CSS3 web前端中文站 2年前 (2017-10-23) 979次浏览 已收录 0个评论

css 两端对齐布局非常重要。前端时间网上流传的关于 Android 版手机微信连续输入句号手机卡死的问题在网上引起了热议。《Android 版微信的「两位数字+15 个句号」 bug 的原理是怎样的?》这篇文章通过对 Android 版的微信进行了分析,找出了其中的原因是因为正则问题,而微信后来也在官方微信公众号中发布了如何会出现此问题,以及此问题的最终要解决 Android 版本的布局问题,可见布局在日常工作中的重要性。本文将介绍CSS 两端对齐布局的使用,有不妥的地方请指出。

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

列表元素的两端对齐布局介绍

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

display:inline-block/text-align:justify 教程(css 两端对齐)

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

display:inline-block/text-align:justify 教程(css 两端对齐)

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

display:inline-block/text-align:justify 教程(css 两端对齐)

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

然后这里的“列表元素”指的是具有类似结构的重复列表元素,例如 QQ 校友中的图片列表:

display:inline-block/text-align:justify 教程(css 两端对齐)

所谓列表元素的两端对齐就是每行列表元素的第一个元素与父容器的左边缘重合,最后一个元素与父容器的右边缘重合。例如淘宝首页的热卖单品,或是人人网的热门分享列表。

平时写页面的时候也经常会拿到的列表元素两端对齐的体验舒服的设计图吧。

CSS 两端对齐的实现

CSS2 中 text-align 有一个属性值为justify,为对齐之意。其实现的效果就是可以让一行文字两端对齐显示(文字内容要超过一行)。如果您现在浏览器的地址是以 https://www.lisa33xiaoq.net/打头的话,就可以发现我的每篇文章都是以两端对齐的方式显示的,所以,有时候就会出现文字非常稀松的情况,如下图所示。

display:inline-block/text-align:justify 教程(css 两端对齐)

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

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

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

列表元素如何实现两端对齐

首先看淘宝网首页热卖单品的例子,如下截图:

display:inline-block/text-align:justify 教程(css 两端对齐)

其列表布局使用的是传统的浮动(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声明,里面的元素就自动等间距两端对齐布局啦!根本无需计算每个列表元素间的 margin 间距,更不用去修改父容器的宽度。

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;}

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

唯一需要注意的就是列表元素首尾标签留空(或换行),不能够上一个标签组的结束标签与下一个标签组的其实标签连在一起。

不仅如此,对于 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 标签化以及结束标签连续化。

inline 标签化

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

结束标签连续化

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

 <span>     
 <a href="#">         
 <img src="test.jpg" />     
 </a>     
 <span>描述</span> </span>

而应该是这个样子滴:

 <span>     
 <a href="#">         
 <img src="test.jpg" />     
 </a>     
 <span>描述</span></span>

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

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

为了便于更直观的知道各个浏览器下实现两端对齐效果需要注意的事项,我特地制作了下表:

浏览器 注意事项
IE6 inline 水平列表标签、列表结束标签连续、列表元素间换行或留空
IE7 inline 水平列表标签、列表结束标签连续、列表元素间换行或留空
IE8 列表元素间换行或留空、列表元素的环境字体大小不能为 0
现代浏览器 列表元素间换行或留空

【注:本文源自网络文章资源,由站长整理发布】


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:display:inline-block/text-align:justify 教程(css 两端对齐)
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址