cssで両端を揃えます~

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

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

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

text-align を justify に設定する必要があるだけです。text-justify の状況はさらに複雑です。 IEの値は次のとおりです:

自動: ブラウザ ユーザー エージェントが使用する配置方法を決定できるようにします
単語間: 単語の間にスペースを追加してテキストを配置します。この動作は、テキストのすべての行を揃える最も速い方法です。その正当化された動作は、段落の最後の行には影響しません
新聞 : 単語または文字間のスペースを増減してテキストを配置します。ラテン文字を両端揃えするための最も正確な形式です
distribute: 新聞と同じようにスペースを処理し、東アジアの文書に適しています。特にタイ
distribute-all-lines: distribution と同じ方法で行を整列させますが、整列した 2 つの段落の最後の行も含めません。表意文字文書に適用されます
inter-ideograph: 表意文字テキストの完全な位置揃えを提供します。彼は表意文字と単語の間にスペースを追加または削除します

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

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

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

元の記事: http://www.cnblogs.com/rubylouvre/archive/2012/11/28/2792504.html

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

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

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

テーブル レイヤー セットの表示: table、td レイヤー セットの表示: table-cell。

もちろん原理は同じです。これを行うには、各単語を外枠で区切る必要があります。この方法は確かに優れていますが、かなり BT のように感じます。