両端の位置合わせを実現する CSS~_html/css_WEB-ITnose

今日フォームを作成していたら、上下のフィールドと携帯電話番号とユーザー名を揃えるという事態に遭遇しました。

その後、今日インターネットで関連する方法を検索しましたが、特に互換性が必要な場合、それを解決する良い方法がないことがわかりました。比較的良いと思われる 2 つの方法を見つけました。

方法 1、Situ Zhengmei のブログで見た - text-align、text-justify

text-align を設定するだけで、テキストが整います。 justify はさらに複雑です。 IE の値は次のとおりです。

auto: ブラウザ ユーザー エージェントが使用する配置ルールを決定できるようにします

inter-word: 単語の間にスペースを追加してテキストを配置します。この動作は、テキストのすべての行を揃える最も速い方法です。両端揃えの動作は段落の最終行には影響しません

新聞 : 単語または文字間のスペースを増減してテキストを配置します。これは、ラテン文字の両端を揃えるための最も正確な形式です

distribute: スペースを新聞のように扱い、東アジアの文書に適しています。特にタイ

distribute-all-lines: 行の両端を揃える方法はdistributeと同じで、揃えた2つの段落の最後の行も含めません。表意文字ドキュメントの場合

inter-ideograph : 表意文字テキストの完全な位置揃えを提供します。表意文字と単語の間のスペースを増減します

しかし、これは text-overflow や overflow-x などの IE のプライベート実装として最初に実装され、FF では非常に後になって実装されました。厳密な互換性の問題です。また、FF と Chrome では、有効にするには漢字の間に空白スペースまたはソフト改行を手動で挿入する必要があります。Chrome で遭遇する抵抗はさらに大きくなります。

.test1 {      text-align:justify;      text-justify:distribute-all-lines;/*ie6-8*/      text-align-last:justify;/* ie9*/      -moz-text-align-last:justify;/*ff*/      -webkit-text-align-last:justify;/*chrome 20+*/  }  @media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/      .test1:after{          content:".";          display: inline-block;          width:100%;          overflow:hidden;          height:0;      }  }

この方法を試してみましたが、Test1 にはまだいくつかの問題があることがわかりました。ナビゲーション ラベルの場合は、display: block; を設定する必要があります。 .com /rubylouvre/archive/2012/11/28/2792504.html

方法 2. これを偶然見ました。以前にも考えたことはありましたが、実際に実行するとは思いませんでした。

テーブルメソッドを使用して、表を作成するのと同じ方法でテキストが均等に分割されるようにします。 (O(∩_∩)O ははは〜軽蔑しないでください!)

同様に、display:table 属性を設定することもできます:

table レイヤーは、display: table を設定し、td レイヤーは、display: table を設定します。 -細胞。

もちろん、これを行うには、各単語を外枠で区切る必要がありますが、この方法は非常に BT です。