「text-align: justify」を使用してインラインブロック要素を均等に配置するにはどうすればよいですか?

「text-align: justify;」インラインブロック要素は均等に広がることができますか?

問題:

text-align を使用したインラインブロック要素: 闘争を正当化コンテンツを均等に配布し、行の一番下に垂直方向の空のスペースを残します。従来のソリューションでは、 line-height: 0; を使用する必要があります。これにより、既存の行の高さの値が中断される可能性があります。

現在のブラウザ (IE8、FF、Chrome) の回避策:

この CSS メソッドは問題を解決します。行の高さを崩さずに:

.prevNext {
    text-align: justify;
}

.prevNext a {
    display: inline-block;
    position: relative;
    top: 1.2em; /* Your line-height */
}

.prevNext:before{
    content: '';
    display: block;
    width: 100%;
    margin-bottom: -1.2em; /* Your line-height */
}

.prevNext:after {
    content: '';
    display: inline-block;
    width: 100%;
}

:before 要素はテキスト行を 1 行上に引き上げますline-height、余分な行は削除されますが、テキストは置き換えられます。インラインブロック要素を相対的に配置すると、余分な行を追加することなく、この位置ずれが解消されます。

「-text-align-last: justify;」による将来の解決策。 (サポート間近):

よりクリーンな将来のソリューションでは、次のものが使用されます:

.prevNext {
    text-align: justify;
    text-align-last: justify; /* Supported in IE and FF, experimental in Chrome */
}

進行中の Webkit サポート:

部分的に Webkit ブラウザこのソリューションはサポートされていますが、実験的な機能を有効にする必要があります。今後のバージョンでは完全にサポートされる予定です。

以上が「text-align: justify」を使用してインラインブロック要素を均等に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。