余分な垂直スペースを設けずにインラインブロック要素を適切に配置するにはどうすればよいですか?

「text-align: justify;」を使用したインラインブロック要素の適切なテキスト位置調整

均等に分散するという課題について、いくつかの議論が検討されてきました。 「text-align: justify;」を使用して、インラインブロック要素全体にテキストを配置します。ただし、依然として残る問題は、要素の行の下に空の垂直スペースが表示されることです。

このフィドルに見られるように、提案された回避策には、「line-height: 0;」を設定することが含まれます。親要素に。ただし、これにより、子要素に以前に設定された行の高さが犠牲になります。

このフィドルで示されている代替ソリューションは、影響を与えることなくこの問題に対処します。 line-height:

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」の「display: block」 " 要素の下マージンが負の場合、テキストが 1 行の高さだけ上に持ち上げられ、余分な行が削除されます。インラインブロック要素の「position:relative」は、追加の行を追加することなく、この位置ずれを打ち消します。

margin-bottom および top 設定での「em」の使用は、次のように設定された行の高さに対応します。乗数値。これにより、変位が意図した線の高さと一致することが保証されます。

将来のクリーン ソリューション

将来のソリューションの可能性としては、Webkit プロパティが使用されます:

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

この方法は Firefox 12.0 および IE8 で機能しますが、Webkit ブラウザで実験的な機能を有効にする必要があります。 Webkit バージョン 39 では、このプロパティは「-webkit-」拡張子なしでサポートされますが、実験的な機能が有効になっている場合にのみサポートされます。

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