Fe-interview: [css] 第159天用css怎么实现两端对齐？

Created on 21 Sep 2019 · 6Comments · Source: haizlin/fe-interview

第159天用css怎么实现两端对齐？

css

Source

haizhilin2013

Most helpful comment

文本的两端对齐
html <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>

vkboo on 22 Sep 2019

👍2

All 6 comments

1、flex 中的justify-context 设置为 space-between
2、设置text-align:justify即可，之前网上是说这个对单行不生效，因此要text-align-last，但是今天试了一下，发现是生效的，并且chrome浏览器也有效

LinStan on 22 Sep 2019

文本的两端对齐
html <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>

vkboo on 22 Sep 2019

👍2