最近上公开课,讲到css的两端对齐,准备写一下心得记录一下。
css两端对齐的两种方式:(原文参见白树大神)
http://www.cnblogs.com/PeunZhang/p/3289493.html#text-justify-demo
方法一:使用text-align:justify
先看代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两端对齐</title>
</head>
<body>
<div class="demo">
<a class="link" href="#">1</a>
<a class="link" href="#">2</a>
<a class="link" href="#">3</a>
<a class="link" href="#">4</a>
<a class="link" href="#">5</a>
<a class="link" href="#">6</a>
<a class="link" href="#">7</a>
</div>
</body>
css
<style type="text/css">
*{margin:0;padding:0;}
.demo{
text-align:justify;
text-align-last:justify;
line-height:0;
height:44px;
}
}
.demo:after{
display:inline-block;
overflow:hidden;
width:100%;
height:0;
content:'';
vertical-align:top;
}
.demo a{
width:5%;
display:inline-block;
height:44px;
line-height:44px;
text-align:center;
border:1px solid #428cc8;
color:#666;
font-size:16px;
margin-bottom:5px;
border-radius:3px;
background-color:#fefefe;
background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fefefe),color-stop(1,#eee));
color:#666;
text-decoration:none;
}
</style>
text-align:justify 属性是全兼容的,使用它实现两端对齐,需要注意在模块之间添加[空格/换行符/制表符]才能起作用,同样,实现文本对齐也是需要在字与字之间添加[空格/换行符/制表符]才能起作用。
然而,尝试之后发现,设置text-align:justify后并没有实现两端对齐的效果。百度之后发现,text-align非常之傲娇,因为它
一行文本不进行处理,还有就是强制换行的也不处理。不会处理被打断的行和最后一行。
那么,1.使用text-align-last,然而这个只有IE支持。(火狐为-moz-text-align-last)
2.使用:after选择器,生成空内容块级元素宽度为100%的一行。于是便有了上面的代码。[align=center][/align]
方法二:使用justify-content:space-between
设置为盒模型,设置justify-content为space-between
.demo{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:justify;
-webkit-justify-content:space-between;
-ms-flex-pack:justify;
justify-content:space-between;
}
分享到:
相关推荐
css 右对齐css 右对齐css 右对齐css 右对齐css 右对齐css 右对齐css 右对齐css 右对齐css 右对齐css 右对齐css 右对齐css 右对齐css 右对齐css 右对齐css 右对齐css 右对齐css 右对齐
div+css布局实现2端对齐是我们网页排版中经常会使用到的,这篇文章主要介绍了css两端对齐之div+css布局实现2端对齐的4种方法总结的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来...
主要介绍了css文本两端对齐的实现代码,需要的朋友可以参考下
兜兜转转一大圈,最后发现实现两端对齐布局方式最简单的居然是使用CSS columns多栏布局。 例如,我们想要实现3列元素两端对齐,中间间隙是30px,CSS代码为: .container { columns: 3 30px; } 叮咚,结束了,game ...
auto :允许浏览器用户代理确定使用的两端对齐法则 inter-word :通过增加字之间的空格对齐文本。该行为是对齐所有文本行最快的方法。它的两端对齐行为对段落的最后一行无效 newspaper : 通过增加或减少字或字母之间的...
NULL 博文链接:https://muzi131313.iteye.com/blog/2047548
在 form 表单的前端布局中,我们经常需要将文本框的提示文本两端对齐,例如: 比较粗暴的做法是在需要隔离边距的文本中加标签,然后分别控制每个文字的边距,这种方法比直接加空格或者占位符更精准,我之前也都是...
主要为大家介绍了CSS强制换行对齐的实现方法,涉及css中text-justify属性的使用技巧,需要的朋友可以参考下
本CSS教程提供了两种对齐方式即垂直居中对齐和底端对齐!更多内容请参考本站的CSS视频教程。 CSS使图片垂直居中的代码: <!DOCTYPE ...
text-align:justify与...但是这对于多行文本(即有文本换行)除了最后一行都可以实现两端对齐,最后一行依旧左对齐。所以就需要控制最后一行文本对齐方式的CSS属性:text-align-last。 2.text-align-last text-align-l
CSS设置图片的对齐方式案例.pdf 学习资料 复习资料 教学资源
table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。table...
Justify 是一个实现元素两端自适应对齐、均分宽度布局的javascript控件。控件对最后一行对齐做了处理,使最后一行的元素能居左依次与上一行的元素垂直对齐,并支持去除部分DOCTYPE下最后一行产生的空隙。控件为移动...
s css3实现手机端滚屏效果,支持循环滚动,请在手机上查看效果,或在浏览器中模拟手机端查看,直接电脑端浏览器无法查看效果。
justify:两端对齐,均匀分布 list-style-type: none 无标记。 disc 默认。标记是实心圆。 circle 标记是空心圆。 square 标记是实心方块。 decimal 标记是数字。 decimal-leading-zero 0开头的数字标记。(01, 02...
CSS3手机端侧滑菜单 4种滑动菜单特效 CSS3手机端侧滑菜单 4种滑动菜单特效