爱好者 > Typecho > 代码相关 > css两端对齐布局

css两端对齐布局

作者:佚名 来源:爱好者 时间:2018-05-20

先上个Demo
<head><title>两端对齐</title></head>
<style type="text/css">
*{margin: 0;padding: 0;font-size: 18px;}
.zuoyou{text-align:justify;text-align-last:justify;}
ul{text-align:justify;    text-align-last:justify;}
li{display:inline-block;}
</style>
<div class="zuoyou">这是一段测试文字</div>
<ul>
<li>第一</li> <li>第二</li>
<li>第三</li>
</ul>
 
实际效果

css两端对齐.png

 
一、div下的文本左右两端对齐
让<div class="zuoyou">这是一段测试文字</div>这段文字左右端对齐,最开始只用text-align:justify;发现并没有效果,后来查资料说这个东西要求文字超过一行,于是就又加了句text-align-last:justify;。
 
text-align:justify;→句子除了倒数第一句外,其他句子两端对齐
text-align-last:justify;→句子的倒数第一句两端对齐
 
二、列表元素的两端对齐
这里那ul li举例,其中text-align:justify;和text-align-last:justify;同上,li的display:inline-block;是让三个li标签在同一行。
 
display:inline-block;→不独占一行的块级元素
 
注意
li标签和li标签之间需要有回车或者空格,demo中三个li标签,用了一个空格和一个回车,测试都没问题。
也就是说不能这么写
 
<li>第一</li><li>第二</li><li>第三</li>
要这么写
 
<li>第一</li> <li>第二</li> <li>第三</li>
不仅如此,对于IE8浏览器,列表元素不能处在font-size:0的环境下,至少code>font-size:1px,因为IE8浏览器font-size:0或直接把换行空格或普通空格抹掉而无法实现两端对齐效果。
 
如果纠结ie6/7的话,可以看看真正大佬的文章http://www.zhangxinxu.com/wordpress/2011/03/displayinline-blocktext-alignjustify%E4%B8%8B%E5%88%97%E8%A1%A8%E7%9A%84%E4%B8%A4%E7%AB%AF%E5%AF%B9%E9%BD%90%E5%B8%83%E5%B1%80/