余分な改行を入れずにインラインブロック要素を正しく両端揃えするにはどうすればよいですか?

インラインブロック要素は「text-align: justify;」で適切に配置できますか?

以前の議論では、「」を適用する方法を検討しました。 text-align: justify」を使用して、インラインブロック要素を均等に配置します。ただし、この手法を使用すると、位置揃えされた要素の行の最後に改行が作成されます。

現在の回避策

この余分な垂直スペースを削除するには、回避策としては、インラインブロック要素に「position:相対」を適用しながら、「前の要素」に負のマージンを使用することが含まれます。この組み合わせにより、テキストの行が上にシフトされ、余分な行が削除されます。

.prevNext {
    text-align: justify;
}

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

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

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

今後の解決策

将来的には、「text-align-last」プロパティは、Firefox と Internet Explorer でサポートされており、より簡単な解決策を提供できる可能性があります。ただし、現在、Webkit には完全には実装されていません。

.prevNext {
    text-align: justify;
    text-align-last: justify;
}

このプロパティを使用すると、インライン ブロック要素の最後の行を位置揃えできるため、回避策の必要がなくなります。

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