CSS单行、同行文本左右对齐

news2024/11/15 13:37:03

再项目需求中，UI小姐姐常常要考虑项目的排版样式更简洁高级，常常会在项目设置内容或者字体两端对齐的效果，比如，在做表单时我们经常遇到让上下两个字段对齐的情况，比如姓名，手机号码，出生地等。

针对这种排版，因为字数不确定，所以我们不好设置固定距离，但是正好css的样式里有一个text-align设置内容对齐，并且有一个是正好设置两端对齐text-align: justify，正中下怀，其实现的效果就是可以让文字两端对齐显示，但是使用也有bug，

（1） text-align:justify 不处理强制打断的行，也不处理块内的最后一行。通俗一点讲，就是只有一行显示的时候这个属性是不起作用的，或者使用了word-break: break-all;这种强制换行的属性，也是不起作用的。

（2）如果内容是多于一行的时候，除了最后一行，都是两端对齐的效果。

总结就是（文字内容要超过一行，最后一行没有两端对齐效果），但是表单的内容就是一排要两端对齐，咋整嘞？各位小伙伴不要着急，我们当然也有很好的解决方法！！

1、方法一在内容中添加一个用于占位的标签，让内容处于第一行，就能达到效果

html 结构

    <ul>
        <li>用户名<p class="box"></p></li>
        <li>账号<p class="box"></p></li>
        <li>验证码<p class="box"></p></li>
    </ul>

css 样式

    <style>
        ul li{
            width: 100px;
            border: 1px solid red;
            text-align: justify;
            height: 24px;
            list-style: none;
        }
        .box{
            display: inline-block;
            width: 100%;
        }
    </style>

2、方法二：使用：after伪元素（ie7及以下不支持伪类）

html结构

    <ul>
        <li>用户名</li>
        <li>账号</li>
        <li>验证码</li>
    </ul>

css 样式

    <style>
        ul li{
            width: 100px;
            border: 1px solid red;
            text-align: justify;
            height: 24px;
            list-style: none;
        }
        li::after{
            content: "";
            display: inline-block;
            width: 100%;
        }
    </style>

前两种方法，原理差不多，但是inline-block盒子会导致下面会多出空白，这时就只有设置 li 的高度，比如给 li 添加 height: 40px;line-height: 40px;

3、方法三：使用 text-align-last:justify 属性

html 结构

    <ul>
        <li>用户名</li>
        <li>账号</li>
        <li>验证码</li>
    </ul>

css 样式

     ul li{
            width: 100px;
            border: 1px solid red;
            text-align: justify;
            text-align-last: justify;
            /* 设置最后一行内容两端对齐 */
            height: 24px;
            list-style: none;
        }

这种解决方法看起来很不错，也很简单，但是text-align-last:justify 这个属性的兼容性不好，在谷歌、火狐浏览器上能正确显示，但是在其它浏览器中却没效果。因为大部分浏览器要使得两端对齐生效，需在文本间插入空白，如空格。

4、方法四兼容多种浏览器的终极兼容方法

html 结构

    <ul>
        <li>用 户 名</li>
        <li>账 号</li>
        <li>验 证 码</li>
    </ul>

css 样式

      <style>
        ul li{
            width: 100px;
            border: 1px solid red;
            text-align: justify;
            text-align-last: justify;
            /* 设置最后一行内容两端对齐 */
            height: 24px;
            list-style: none;
        }
        li{
            content: "";
            display: inline-block;
            width: 100%;
        }

    </style>

注意每个单词之间都有空格，这个很重要，很重要，很重要，而且只需一个空格就行，多个空格也不影响。如果没有这个空格，兼容性很差，基本只有谷歌和火狐支持，这个方法兼容ie7及以上，还有其它的浏览器基本都支持。

再来看看页面的显示效果：