css两端对齐的思考

程序员文章站 2022-07-08 20:21:51

...

最近上公开课，讲到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两端对齐的思考

CSS3的column-fill属性对齐列内容高度的用法详解

css，解决文字与图片对齐的问题

css居中对齐的几种方法实例分享

CSS实现段落两端对齐的方法

AE文字无法对齐怎么办? AE两端对齐无法使用的解决办法

css之文本两端对齐

CSS实现多个元素在盒子内两端对齐效果

CSS设置文本的水平对齐方向

CSS3的column-fill属性对齐列内容高度的用法详解

css 表单标签两端对齐