text-align が両端の位置合わせを実現する方法

今回はtext-align両端の位置合わせを実現する方法と、text-alignで両端の位置合わせを実現するための注意事項を紹介します。実際のケースを見てみましょう。

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

text-align-last の互換性の問題のため: https://caniuse.com/#search=text-align -最後に、方法 2 を使用して達成する必要があります:

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

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Node.js で HTTPS をデプロイする方法

JavaScript スコープの使用方法

以上がtext-align が両端の位置合わせを実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。