不要なスペースを入れずにインラインブロック要素を両端揃えにするにはどうすればよいですか?

「text-align: justify」によるインライン要素の整列

「text-align: justify」を使用してインラインブロック要素を均等に整列させようとした以前の試みにもかかわらず、永続的な問題が発生します。ブラウザは、インラインブロックの行をクリアする幅 100% の要素の後に空の垂直スペースを追加します。

line-height: 0 を使用しない解決策を求めて、空のスペースは削除されますが、元の行の高さは破棄され、潜在的な代替案を検討します。

現在の回避策 (IE8 、 FF、Chrome テスト済み)

(フィドルを参照: https://jsfiddle.net/jasperdeGroot/xe27o/)

CSS:

.prevNext {
    text-align: justify;
}

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

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

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

説明:

この回避策では、負の下マージンを持つ :before 擬似要素を利用してテキストを移動します。余分な線を削除します。次に、インライン ブロック要素は、この位置ずれを補正するために、position:relative で調整されます。

将来の解決策

完全なサポートが待っている有望な解決策は、「」の使用です。 text-align-last: justify」は、回避策を必要とせずにインライン要素を両端揃えにします。ただし、現時点では Webkit ブラウザで実験的な機能を有効にする必要があり、アクセシビリティが制限されています。

(フィドルを参照: https://jsfiddle.net/jasperdeGroot/c3r4w/)

CSS:

.prevNext {
    text-align: justify;
    text-align-last: justify; /* IE */
}

注: このソリューションは適切ではない可能性があります完全なサポートが実装されるまで、すべてのブラウザで使用できます。

以上が不要なスペースを入れずにインラインブロック要素を両端揃えにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。