Html 如何替换责任表单css中的固定值

责任表单是使用下面的代码创建的。 若窗口被调整大小，它会自动调整大小，标题和输入元素保持对齐

它包含固定值210px、75px、100px、120px，如下所示。 是否合理？如果合理，如何删除/替换这些固定值 比如百分比还是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>

---

虽然我个人在大多数情况下使用ems，但在我看来还行

---

<>你也可以考虑使用一个预处理器，如使用更少的变量来避免重复。你可以通过nuget获得更少或更少的SASS，还有无数的教程。

我从一些教程中读到，应该从css文件中删除魔法常量。预处理器仍然在css中保留神奇的常量。问题询问如何替换它们，eq.将宽度设置为百分比

.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;
}