Wie text-align die Ausrichtung an beiden Enden erreicht

Dieses Mal werde ich Ihnen text-align zeigen, wie Sie eine Ausrichtung an beiden Enden erreichen, welche Vorsichtsmaßnahmen es gibt, damit text-align eine Ausrichtung an beiden Enden erreicht. Folgendes ist Folgendes Ein praktischer Fall, werfen wir einen Blick darauf. Schauen Sie mal rein.

Methode 1: text-align-last: justify; Kompatibilitätsprobleme:

https://

caniuse.com/#search=text-align-last, zur Implementierung muss Methode zwei verwendet werden:

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

Glauben Sie es. Nachdem Sie den Fall in diesem Artikel gelesen haben, beherrschen Sie die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So stellen Sie HTTPS in Node.js bereit

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

JavaScript-Bereiche verwenden

Das obige ist der detaillierte Inhalt vonWie text-align die Ausrichtung an beiden Enden erreicht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!