4

私はフォームを持っていて、行全体（4つのテキストボックスとラベル）が正確なピクセル幅（800pxとしましょう）に合うように行を「正当化」しようとしています。通常、特別なcssを使わずにそのままレイアウトすると、800px未満になります。800pxになるように「引き伸ばし」たい。テキストボックスまたはそれらの間のスペースを引き伸ばす必要があるかどうかは気にしません。

これは、探しているものを説明するのに役立つ場合、MS Word の正当化されたレイアウトに似ています。これは、フォーム レイアウトの html/css 内で可能ですか?

4

5 に答える 5

3

実際、純粋な CSS を使用してこれを行う非常に自然な方法がありますtext-align: justify;。

正当化が最後の行に対して機能しないため、成功しませんでした (また、行が 1 つしかない場合は、最後の行と見なされます)。最後の行のテキストの配置を設定する CSS3 プロパティがあります: text-align-last。残念ながら、広くサポートされていません。

解決策は、次の行にドロップされる余分な要素を生成することです。その後、最初の行が正当化されます。 

<form>
  <input type="text" value="" />
  <input type="text" value="" />
  <input type="text" value="" />
  <input type="text" value="" />
</form>

form {
  width: 800px;
  text-align: justify;    /* Can we really make this work? Sure! */
}

input {
  display: inline-block;  /* making elements respect text-align */
}


form:after {
  content: "";            /* creating a hidden element that drops to next line */
  display: inline-block;  /* making it respect text-align and width */
  width: 100%;            /* forcing it to drop to next line */
}

デモ: http://jsbin.com/ituroj/5/ (右上隅の [編集] をクリックして、コードをいじります)。

結果: セマンティック、HTML フットプリントなし、最小限の CSS コード、完全なブラウザー サポート。

于 2013-04-25T13:31:36.123 に答える
1

1つのアプローチは次のとおりです。

input[type=text] {
    width: 25%;
    box-sizing: border-box;
}

または、フィールドが実際にこの Fiddle<table/>のような内にある場合は、テキスト ボックスの を に設定して、テーブルが幅を制御できるようにします。width100%

input[type=text] {
    width: 100%;
    box-sizing: border-box;
}
于 2013-04-14T01:12:55.247 に答える