如何更换负责任形式的CSS固定值(How to replace fixed values in re

2019-10-17 12:48发布

负责形式创建使用以下代码。 如果大小的窗口,它会调整自身自动,字幕和input元素保持一致。

它包含固定值210px,960x75像素,100像素,120像素低于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;
}

Answer 1:

看起来没给我,虽然我个人在大多数情况下使用EMS。

你也可以考虑使用像LESS预处理程序,如果你想使用变量来避免重复。 你可以通过的NuGet小于或SASS和有教程不计其数那里。



文章来源: How to replace fixed values in responsible form css