CSSで3つの単語を2つの単語に揃える方法

CSS で 3 つの単語と 2 つの単語の配置を実現する方法: 最初に HTML サンプル ファイルを作成し、次に「text-align: justify」およびその他のスタイルを指定された div に追加して、3 つの単語と 2 つの単語を実現します。位置合わせ。

推奨: 「css ビデオ チュートリアル 」

要件は次のとおりです。赤枠内のテキストは次のとおりです。 4文字、3文字、2文字、両端を揃えない場合は中央揃え、右揃えを選択できます。しかし、以下のように両端を揃えたい場合はどうすればよいでしょうか?

多くの人が以前にこれを行ったことがあると思いますが、2 文字を使用して 4 文字幅に区切ります。3 文字でも許容されますが、上記のように画像のように、「122 口座番号」と「122 パスワード」は、スペースをいくつ使用するかを計算するのが困難です。

次の HTML があるとします。

この世界では、夢と良い子だけ​​を裏切ることはできません。

スタイルを追加します

div{
  width:500px;
  border:1px solid red;
  text-align: justify;
}

最初の効果は次のとおりです

text-align: justifyこれは何ですかもの？ CSS2 の Text-align には、揃えを意味する justify という属性値があります。達成される効果は、テキスト行を両端に揃えて表示できることです (テキストの内容は 1 行を超える必要があります)。

しかし、これを使用するだけではまだ役に立ちません...

テキストの両端を揃えるには、、< などのインライン空タグを使用する必要があります。 i> ;待ってください、ここでは タグ

<div>这世间唯有梦想和好姑娘不可辜负！<i></i></div>

を使用して i タグ

div i{
  display:inline-block;
  /*padding-left: 100%;*/
  width:100%;
}

padding-left: 100% および width:100% のスタイルを設定します。効果は、いずれかを選択するだけです。結果は次のとおりです

#ただし、HTML 要素を追加すると、構造と表示の分離の原則に違反します。代わりに、疑似要素の前後を使用できます。

以上がCSSで3つの単語を2つの単語に揃える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。