[css] 用css怎么实现两端对齐?


    文本的两端对齐

    <style>
        .form .text {
            display: inline-block;
            width: 65px;
            text-align-last: justify;
        }
    </style>
    <div class="form">
        <div>
            <span class="text">用户名</span>
            <input type="text">
        </div>
        <div>
            <span class="text">密码</span>
            <input type="text">
        </div>
    </div>

    元素的两端对齐

        <style>
            .wrap {
                width: 100px;
                height: 100px;
                border: 1px solid;
                display: flex;
                justify-content: space-between;
            }

            .wrap > div {
                width: 20px;
                height: 20px;
            }
            .a {
                background: red;
            }
            .b {
                background: blue;
            }
        </style>
        
        <div class="wrap">
            <div class="a"></div>
            <div class="b"></div>
        </div>


个人简介

我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题