web-dev-qa-db-ja.com

「text-align：justify;」インラインブロック要素は適切に？

他のいくつかの質問では、text-align: justifyを適用してインラインブロック要素を均等に広げる最適な方法を既に取り上げています。たとえば、 HTML + CSS？

ただし、インラインブロック要素の行を「クリア」する100％幅の要素には、ブラウザによって独自の行が与えられます。親要素でline-height: 0;を使用せずに、その空の垂直方向のスペースを取り除く方法がわかりません。

問題の例については、 this fiddle を参照してください

line-height: 0;を使用する私のソリューションについては、 this fiddle を参照してください

私が使用しているソリューションでは、新しいline-heightを子要素に適用する必要がありますが、以前に設定されたline-heightはすべて失われます。誰かがより良い解決策を知っていますか？必要に応じて要素が折り返されるようにテーブルを避けたいし、ブラウザのサポートがまだないのでflexbox。任意です。

csstext-alignjustify
50
thirdender

以下を考慮してください。

.prevNext {
    display: table;
    width: 100%
}

.prevNext a {
    display: table-cell;
    text-align: center
}

（ 編集されたフィドル も参照してください）それがあなたが探しているものですか？この手法の利点は、さらにアイテムを追加でき、それらがすべて自動的に中央に配置されることです。最新のすべてのWebブラウザーでサポートされています。

7
ACJ

まず、マークアップのセマンティクスを維持するために、pseudo-elementのアプローチが好きです。全体的なアプローチに固執すべきだと思います。位置決めデータを取得するために、テーブル、不要なマークアップ、またはオーバースクリプトを使用するよりもはるかに優れています。

text-alignがハッキーであることを強調したみんなのために-おいで！ HTMLは、CSSを犠牲にしてセマンティックにする方が、逆の場合よりも優れています。

だから、私の理解から、あなたは毎回line-heightをリセットすることを心配することなく、この正当なインラインブロック効果を達成しようとしていますか？私はあなたが単に追加すると主張します

.prevNext *{
    line-height: 1.2;  /* or normal */
}

その後、何も起こらなかったかのようにコーディングを始めることができます。パフォーマンスが心配な場合の*セレクターに関するPaul Irishの引用は次のとおりです。

「...すべてのjavascriptを連結し、最下部に配置し、cssとjsを縮小し、すべてのアセットをgzipし、すべての画像を無損失で圧縮しない限り、*のパフォーマンスを気にすることはできません。 90を超えるページスピードスコアを取得しても、セレクタの最適化について考えるのは時期尚早です。」

お役に立てれば！

-Jコールモリソン

4
J Cole Morrison

試行する text-alignこの問題の場合はかなりハックです。 text-alignプロパティは、ブロックのインラインコンテンツ（具体的にはテキスト）を整列させることを目的としています。html要素を整列させることは意図していません。

あなたはフロートを避けようとしていることを理解していますが、私の意見では、フロートはあなたがやろうとしていることを達成するための最良の方法です。

1
Michael Frederick

@Scottsが述べたように、次のことはChrome内で-webkit部分なしで実装されました。特に-browser-specific-shǐtをすぐに取り除く必要があるので、私は本当に大好きでした。

.prevNext {
    text-align: justify;
    -moz-text-align-last: justify;
    -webkit-text-align-last: justify; /* not implemented yet, and will not be */
    text-align-last: justify; /* IE + Chrome */
}

注：それでもSafariとOpera まだサポートしない （08 -SEPT-16）。

0
Mohd Abdul Mujib

あなたのフィドルは非常に具体的です。あなたの場合、このCSSはうまくいくようです：

.prevNext {
    border: 1px solid #ccc;
    position: relative;
    height: 1.5em;
}

.prevNext a {
    display: block;
    position: absolute;
    top: 0;
}

.prevNext a:first-child {
    left: 0;
    text-align: left;
}
.prevNext a:last-child {
    right: 0;
    text-align: right;
}
​
0
artlung

この例では、ユニットなしのline-height:1.2があります。これにより問題が発生する可能性があります。境界線を使用していない場合、親と子にline-heightの0を与えることができます。

私が考えることができる他のオプションは次のとおりです。

  1. 親でdisplay:tableを使用し、子でdisplay:table-cellを使用して、動作のようなテーブルをシミュレートします。そして、最初のアイテムを左に、最後のアイテムを右に揃えます。こちらをご覧ください fiddle 。
  2. Javascriptを使用してnavの子のカウントを行い、均等に分散された幅を与えます。例えば。 4人の子供、25％width各。そして、最初と最後のアイテムをそれぞれ左右に揃えます。
  3. アイテムを均等に配布する方法がありますが、HTMLにマイナスのマージンとtext-align:justifyとともに慎重に配置する必要があるいくつかの非分割スペースを必要とする複雑な方法です。それをnav要素に適応させてみてください。例 here を参照してください。
0
Moin Zaman