1

責任あるフォームは、以下のコードを使用して作成されます。ウィンドウのサイズが変更されると、ウィンドウ自体のサイズが自動的に変更され、キャプションと入力要素は整列したままになります。

固定値210px、75px、100pxが含まれ、120pxは以下のcssです。それは合理的ですか？もしそうなら、それらの固定値を削除/パーセントやemのような他のものに置き換える方法は？

入力、要素の選択、およびドロップダウンボタン付きのjquery-uiオートコンプリートが使用されます。

<form class='ui-widget-content form-document'>

<div class='form-field'>
<label class='form-label' for='nimi'>Customer name</label>
<span class='form-fullwidth'>
<input class='ui-widget-content ui-corner-all form-autocomplete' name='nimi' value='Karu Org AS' ></input>
<button type='button' class='form-combobutton' tabindex=-1 ></button>
</span>
</div>

<div class='form-field'>
<label class='form-label' for='Number'>Number</label>
<input class='ui-widget-content ui-corner-all form-fullwidth' name='Number' />
</div>

<div class='form-field'>
<label class='form-label' for='payterm'>Pay term</label>
<span id='span_Maksetin1_tingimus' class='form-fullwidth'>
<select class='ui-widget-content ui-corner-all form-fullwidth' name='payterm'>

<option value='' selected='selected'></option>
<option value='0'>0 days</option>
</select>
</span>
</div>

... lot of similar form-field divs
</form>

css：

.form-document
{
    padding: 0.5%;
}

.form-field
{
    display: inline-block;
    margin: 2px;
    width: 210px; /* label width + input field width */
}

.form-label
{
    padding-left: 5px;
    padding-right: 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: smaller;
    display: inline-block;
    text-align: right;
    width: 75px;  /* determine by max caption width */
}

.form-fullwidth
{
    width: 120px; /* 210-5-75 */
}

.form-autocomplete
{
    width: 100px; /* 210-5-75-combobutton width*/
}


.form-combobutton
{
    height: 1.09em;
    margin: 0 0 0px;
    padding: 0;
    margin-left: -6px;
    vertical-align: middle;
    width: 1em !important;
}
4

1 に答える 1

0

私はほとんどの場合個人的にemsを使用していますが、私には問題ないように見えます。

繰り返しを避けるために変数を使用したい場合は、LESSのようなプリプロセッサの使用を検討することもできます。nugetを介してLESSまたはSASSを取得でき、そこには無数のチュートリアルがあります。

于 2012-12-27T09:41:25.500 に答える