css两端对齐的思考

最新推荐文章于 2022-02-25 08:40:09 发布

项志鹏同學

最新推荐文章于 2022-02-25 08:40:09 发布

阅读量157

点赞数

本文链接：https://blog.csdn.net/qq_34301371/article/details/75038992

版权

最近上公开课，讲到css的两端对齐，准备写一下心得记录一下。
css两端对齐的两种方式:(原文参见白树大神）[url]http://www.cnblogs.com/PeunZhang/p/3289493.html#text-justify-demo[/url]
[b]方法一：使用text-align:justify[/b]
先看代码
html
[code="java"]<!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>[/code]
css
[code="java"]
<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>[/code]
text-align:justify 属性是全兼容的，使用它实现两端对齐，需要注意在模块之间添加[空格/换行符/制表符]才能起作用，同样，实现文本对齐也是需要在字与字之间添加[空格/换行符/制表符]才能起作用。
然而，尝试之后发现，设置text-align:justify后并没有实现两端对齐的效果。百度之后发现，text-align非常之傲娇，因为它[b]一行文本不进行处理，还有就是强制换行的也不处理。不会处理被打断的行和最后一行。[/b]
那么，1.使用text-align-last，然而这个只有IE支持。(火狐为-moz-text-align-last)
2.使用:after选择器，生成空内容块级元素宽度为100%的一行。于是便有了上面的代码。[align=center][/align]
[b]方法二：使用justify-content:space-between[/b]
设置为盒模型，设置justify-content为space-between
[code="java"].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;
}[/code]

项志鹏同學

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css两端对齐的思考

最近上公开课，讲到css的两端对齐，准备写一下心得记录一下。 css两端对齐的两种方式:(原文参见白树大神）[url]http://www.cnblogs.com/PeunZhang/p/3289493.html#text-justify-demo[/url][b]方法一：使用text-align:justify[/b]先看代码html[code="java"]<!DOCTYP...
复制链接

扫一扫