您的位置：首页 > Web前端 > CSS

text-align:justify实现两端对齐

2016-10-21 09:14 337 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0;padding:0;}
/*
说明：
1.IE中要实现块内单行两端对齐需要使用其私有属性text-align-last:justify配合，text-align-last 要生效，必须先定义text-align 为justify
2.line-height:0 解决标准浏览器容器底部多余的空白
*/
.demo{
text-align:justify;
text-align-last:justify;
line-height:0;
height:44px;
}
/*
说明：
模块使用[换行符]或[空格符]后，webkit浏览器中会引起最后一个模块有多余空白，使用font-size:0可清除该空格
*/
@media all and (-webkit-min-device-pixel-ratio:0){
.demo{
font-size:0;
}
}
/*
说明：
1.text-align-last:justify 目前只有IE支持，标准浏览器需要使用 .demo:after 伪类模拟类似效果
2.opera浏览器需要添加 vertical-align:top 才能完全解决底部多余的空白
*/
.demo:after{
display:inline-block;
overflow:hidden;
width:100%;
height:0;
content:'';
vertical-align:top;
}
.demo a{
width:20%;
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>
</head>
<body>
<p>模块内的元素之间为 分隔，只支持webkit和Gecko内核浏览器</p>
<br />
<div class="demo">
<a class="link" href="#none">10元</a> 
<a class="link" href="#none">20元</a> 
<a class="link" href="#none">30元</a> 
<a class="link" href="#none">50元</a>
</div>
<br />
<p>模块内的元素之间为换行符</p>
<br />
<div class="demo">
<a class="link" href="#none">10元</a>
<a class="link" href="#none">20元</a>
<a class="link" href="#none">30元</a>
<a class="link" href="#none">50元</a>
</div>
<br />
<p>模块内的元素之间为空格符</p>
<br />
<div class="demo">
<a class="link" href="#none">10元</a>
<a class="link" href="#none">20元</a>
<a class="link" href="#none">30元</a>
<a class="link" href="#none">50元</a>
</div>
<br />
<p>模块内的元素之间为无分隔符，justify不起作用</p>
<br />
<div class="demo">
<a class="link" href="#none">选项1</a><a class="link" href="#none">选项2</a><a class="link" href="#none">选项3</a><a class="link" href="#none">选项4</a>
</div>
<br />
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 前端大全-CSS

相关文章推荐

新的分享

章节导航