css两端对齐布局

先上个Demo

<!DOCTYPE html><html><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>
<body>
<div class="zuoyou">这是一段测试文字</div>
<ul>
<li>第一</li> <li>第二</li>
<li>第三</li>
</ul>
</body></html>

实际效果
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;同上,lidisplay: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/

Comments (7)

    Generic placeholder image
    lili 回复

    感觉非常好!

    Generic placeholder image
    清酒踏月 回复

    张鑫旭,大佬哇。

    Generic placeholder image
    雨落无声 回复

    真·技术文章

    Generic placeholder image
    gsdad_white 回复

    水文嫌疑~~~QAQ

      Generic placeholder image
      Jrotty 回复

      并不是,有人问我才查的,之前我也不会,所以记录下

    Generic placeholder image
    尚寂新 回复

    好东西 正需要 感谢

    Generic placeholder image
    Sakura 回复

    收藏了,也许以后用得上