text-align が両端の位置合わせを実現する方法-jsチュートリアル-php.cn

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

php中世界最好的语言

リリース： 2018-03-20 09:36:53

オリジナル

4412 人が閲覧しました

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

方法 1: text-align-last: justify;

html

姓名

手机号

ログイン後にコピー

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 サイトの他の関連記事を参照してください。