html - 如何以负责任的形式 css 替换固定值

Question

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

它包含固定值 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;
}

Answer 1

虽然我个人在大多数情况下都使用 em，但我觉得还不错。

如果你想使用变量来避免重复，你也可以考虑使用像 LESS 这样的预处理器。您可以通过 nuget 获得 LESS 或 SASS，那里有无数的教程。