51

text-align: justify他のいくつかの質問は、インライン ブロック要素が均等に広がるように適用する最善の方法をすでに解決しています。

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

問題の例については、このフィドルを参照してください

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

私が使用しているソリューションではline-height、子要素に new を適用する必要がありますが、以前に設定されたline-heightものは失われます。誰もがより良い解決策を知っていますか? 必要に応じて要素を折り返すことができるようにテーブルを避けたいと思います。また、ブラウザーのサポートがまだないため、フレックスボックスも避けたいと考えています。また、間隔を空けて配置される要素の数は任意になるため、フロートは避けたいと思います。

4

8 に答える 8

89

以下の「将来」のソリューション情報を更新しました。まだ完全にはサポートされていません。

現在の回避策（IE8 +、FF、Chromeテスト済み）

このフィドルを参照してください。

関連する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%;
}

説明

下マージンが負の要素のdisplay: blockonは:before、テキストの行を1行の高さまで引き上げ、余分な行を削除しますが、テキストを置き換えます。次にposition: relative、要素をオンにするとinline-block、変位が打ち消されますが、追加の行を追加することはありません。

cssline-height自体は「ユニット」自体に直接アクセスすることはできませんemが、margin-bottomおよび設定での使用は、乗数値の1つとして指定されたものにtop簡単に対応します。したがって、、、またはは、に関して計算ですべて等しくなります。これは、が設定されている場合でも、ここで適切な選択を使用します。サイトの外観を正規化するための適切なコーディングは、ある時点で明示的に定義する必要があることを意味します。したがって、乗数法のいずれかを使用すると、同等の単位はと同じ値になります。そして、line-height1.2120%1.2emline-heightemline-height: 1.21.2emmargin-bottomtopline-heightemline-heightline-heightempx代わりに設定できる、などの長さ。

LESSやSCSSなどのcssプリプロセッサを使用して変数またはミックスインを使用すると、これらの値を適切な値と一致させるのに役立ちますline-height。または、JavaScriptを使用して動的に読み取ることができますが、実際にはline-height、これが使用されている場所のコンテキストで知っておく必要があります。 、およびここで行われた適切な設定。

縮小されたテキスト（スペースなし）の問題の更新

Kubiのコメントは、<a>要素間のスペースを削除するhtmlの縮小により、正当化が失敗することを指摘しています。タグ内の疑似スペース<a>は役に立ちませんinline-block（ただし、スペースが要素内で発生しているため、これは予想されます）、タグ<wbr>間に追加<a>しても役に立ちません（おそらく次の行にブレークが必要ないため）。縮小化が望まれる場合、解決策はハードコードされたノーブレーク&nbsp;スペース文字です。シンスペースやエンスペースなどの他のスペース文字は（驚くべきことに）機能しませんでした。

未来のクリーンソリューションに近づいています

（これを最初に書いた時点で）時代遅れだっwebkitた解決策は次のとおりです。

.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 */
}

FF12.0+およびIE8+（IE7ではバギー）で動作します。

Webkitの場合、バージョン39の時点で（少なくとも以前は忍び寄っていた可能性があります）、拡張機能なしでサポートされますが、ユーザーが実験的な機能を有効にしている場合に限ります（で実行できます）。噂によると、バージョン41または42は完全にサポートされるはずです。まだシームレスにサポートされていないため、まだ部分的な解決策にすぎません。ただ、役に立つ人もいるので投稿したほうがいいと思いました。-webkit-chrome://flags/#enable-experimental-web-platform-featureswebkit

于 2012-07-23T19:47:02.973 に答える
7

次の点を考慮してください。

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

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

(編集された fiddleも参照してください。)それはあなたが探しているものですか? この手法の利点は、さらに項目を追加でき、それらがすべて自動的に中央に配置されることです。最新のすべての Web ブラウザーでサポートされています。

于 2012-07-24T01:28:03.303 に答える
4

pseudo-elementまず、マークアップのセマンティックを維持するためののアプローチが好きです。全体的なアプローチに固執する必要があると思います。ポジショニングデータを取得するために、テーブル、不要なマークアップ、または上位のスクリプトに頼るよりもはるかに優れています。

text-alignハッキーであることについて強調したすべての人のために-さあ！CSSを犠牲にしてhtmlをセマンティックにする方が、その逆よりも優れています。

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

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

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

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

お役に立てれば！

-Jコールモリソン

于 2012-07-23T23:02:28.160 に答える
1

この問題を解決しようとするtext-alignのはかなりハックです。このtext-alignプロパティは、ブロックのインライン コンテンツ (具体的にはテキスト) を整列させるためのものです。html 要素を整列させるためのものではありません。

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

于 2012-07-23T21:45:14.213 に答える
0

あなたのフィドルはひどく具体的です。あなたの場合、この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;
}
​
于 2012-07-27T20:05:55.243 に答える
0

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

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

  1. display:table親と子で使用して、display:table-cellテーブルのような動作をシミュレートします。そして、最初の項目を左に、最後の項目を右に揃えます。このフィドルを参照してください。
  2. javascript を使用して nav の子の数を数えてから、それらに均等に分散された幅を与えます。例えば。4人の子供、それぞれ25% width。そして、最初と最後のアイテムをそれぞれ左と右に揃えます。
  3. 項目を均等に分散する方法はありますが、これは複雑な方法であり、改行しないスペースを html に慎重に配置し、負のマージンとtext-align:justify. あなたはそれを要素に適応させてみることができnavます。ここで例を参照してください。
于 2012-07-23T22:13:22.620 に答える
0

@Scotts が述べたように、次のものが Chrome 内に実装されていますが、-webkitpart はありません-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)。

于 2016-09-08T18:16:58.607 に答える
-2

class特定の/でクリック可能な要素を作成し、それに応じてoridを割り当てるのが最善の方法だと思います。それが役立つことを願っています。float:leftfloat:right

于 2012-07-21T20:50:03.897 に答える