Comment l'alignement du texte réalise l'alignement aux deux extrémités

Cette fois, je vais vous expliquer alignement du texte comment réaliser l'alignement aux deux extrémités, quelles sont les précautions pour que l'alignement du texte obtienne l'alignement aux deux extrémités, ce qui suit est un cas pratique, jetons un coup d'oeil Jetez un œil.

Méthode 1 : text-align-last : justifier

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;
    }

En raison de text-align-last Problèmes de compatibilité : https://caniuse.com/#search=text-align-last, vous devez utiliser la deuxième méthode pour implémenter :

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%;
        }

Croyez-le Après avoir lu le cas dans cet article, vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Comment déployer HTTPS dans Node.js

Utilisation des étendues JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!