両端揃えのインラインブロック要素の下の余分な垂直スペースを削除するにはどうすればよいですか?

「text-align: justify;」を適切に揃える方法インライン ブロック要素

これまでの議論では、「text-align: justify」を使用してインライン ブロック要素を均等に分散する効果的な方法を検討しましたが、依然として問題が残っています。それは、最後の行の下に不要な垂直スペースが存在するということです。

現在の回避策

この問題は、次の方法で解決できます。 CSS と HTML の構造:

HTML:

<div class="prevNext">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
</div>

CSS:

.prevNext {
    text-align: justify;
}

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

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

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

説明:

負の下マージンを持つ :before 要素テキストの行を持ち上げて、余分なスペースを排除します。インライン ブロック要素の相対的な位置決めにより、余分な行を追加することなく、このシフトに対処できます。 em 単位により、使用される行の高さに関係なく余白が確実に揃えられます。

将来の解決策

近い将来の解決策には、text-align-last プロパティの使用が含まれます。 :

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

これにより、追加の CSS トリックは必要なくなりますが、現在 Webkit で実験的な機能を有効にする必要があります

縮小されたテキストの問題の処理

縮小によってインライン ブロック要素間のスペースが削除される場合は、アンカー タグの間に非改行スペース文字 ( ) を追加します。

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