How text-align achieves alignment at both ends

This time I will bring you text-alignHow to achieve alignment at both ends, and text-align to achieve alignment at both ends. take a look. Method 1: text-align-last: justify;

html

<p>
        <p class="item">
            <label for="name" class="itemLabel">姓名</label>
            <input type="text" class="itemContent" id="name">
            
        </p>
        <p class="item">
            <label for="phone" class="itemLabel">手机号</label>
            <input type="text" class="itemContent" id="phone">
        </p>
        
 </p>

css

 .itemLabel{
            display: inline-block;
            width: 60px;
            text-align-last:justify;
    }

Due to the compatibility issue of text-align-last:

https://

caniuse.com/#search=text-align-last, you need to use method 2 to implement: css

        .item{
            position: relative;
        }
        .itemContent{
            position: absolute;
            left:70px;
        }
        .itemLabel{
            display: inline-block;
            width: 60px;
            text-align: justify;
        }
       .itemLabel:after{
            display: inline-block ;
            content: ''; 
            width: 100%;
        }

I believe you have read the case in this article After mastering the method, please pay attention to other related articles on the php Chinese website for more exciting content!

Recommended reading:

How to deploy HTTPS in Node.js

Using JavaScript scope

The above is the detailed content of How text-align achieves alignment at both ends. For more information, please follow other related articles on the PHP Chinese website!