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

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

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

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

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

しかし、これは 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 です。