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

        

            姓名
            
            
        
        

            手机号
            
        
        
 

css

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

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

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:

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!