css两端对齐布局 - QQ爹博客
QQ爹博客 QQ爹博客

css两端对齐布局

in 代码相关 文章转载请注明来源!

先上个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/

jrotty WeChat Pay

微信打赏

jrotty Alipay

支付宝打赏

文章二维码

扫描二维码,在手机上阅读!

代码布局css
发表新评论
  • ]
已有 7 条评论
  1. lili
    lili XPChrome 55
    回复

    感觉非常好!

  2. 清酒踏月
    清酒踏月 NChrome 65
    回复

    张鑫旭,大佬哇。

  3. 雨落无声
    雨落无声火狐浏览器 60
    回复

    真·技术文章

  4. gsdad_white
    gsdad_whiteSafari 5
    回复

    水文嫌疑~~~QAQ

    1. Jrotty
      Jrotty本文作者客户端
      回复

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

  5. 尚寂新
    尚寂新 NChrome 51
    回复

    好东西 正需要 感谢

  6. Sakura
    SakuraEdge 13
    回复

    收藏了,也许以后用得上

前篇 后篇
雷姆
拉姆