cssで両端を揃えます~-htmlチュートリアル-php.cn

cssで両端を揃えます~

WBOY

リリース： 2016-06-16 08:39:27

オリジナル

1123 人が閲覧しました

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

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

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

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

しかし、これは 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 のように感じます。