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
css两端对齐.png
一、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/
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
相关产品与服务
腾讯云服务器利旧
云服务器（Cloud Virtual Machine，CVM）提供安全可靠的弹性计算服务。 您可以实时扩展或缩减计算资源，适应变化的业务需求，并只需按实际使用的资源计费。使用 CVM 可以极大降低您的软硬件采购成本，简化 IT 运维工作。