Comment l'alignement du texte réalise l'alignement aux deux extrémités-js tutoriel-php.cn

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

php中世界最好的语言

Libérer： 2018-03-20 09:36:53

original

4632 Les gens l'ont consulté

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>

Copier après la connexion

css

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

Copier après la connexion

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

Copier après la connexion

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!