如何更换负责任形式的CSS固定值 [英] How to replace fixed values in responsible form css

问题描述

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

它包含固定值210px，960x75像素，100像素，120像素低于CSS。
它是合理的，如果是，如何删除/与其他东西代替这些固定值
像百分比或EM的？

输入，选择元素和jQuery的UI自动完成与下拉按钮被使用。

 ＆LT;窗​​体类=UI小部件内容格式的文档'＆GT;＆LT; D​​IV CLASS ='表单域'＆GT;
＆LT;标签类='表单标签为='NIMI'＆GT;客户名称和LT; /标签＆gt;
＆LT;跨度类='的形式，全角'＆GT;
＆LT;输入类=UI小部件内容的UI刀尖所有表单自动完成的名字='NIMI'值='卡鲁组织AS'＆GT;＆LT; /输入＆GT;
＆LT;按钮式='按钮'类='表单combobutton'的tabindex = -1＆GT;＆LT; /按钮＆GT;
＆LT; / SPAN＆GT;
＆LT; / DIV＆GT;＆LT; D​​IV CLASS ='表单域'＆GT;
＆LT;标签类='表单标签为='数'＆GT;数字与LT; /标签＆gt;
＆LT;输入类=UI小部件内容的UI刀尖所有表单全角NAME =数字/＆GT;
＆LT; / DIV＆GT;＆LT; D​​IV CLASS ='表单域'＆GT;
＆LT;标签类='表单标签为='payterm'＆GT;要术语LT; /标签＆gt;
＆LT;跨度ID ='span_Maksetin1_tingimus'类='的形式，全角'＆GT;
＆LT;选择类=UI小部件内容的UI刀尖所有表单全角NAME ='payterm'＆GT;＆LT;期权价值=''选择='选择'＆GT;＆LT; /选项＆GT;
＆LT;期权价值='0'＆GT;0天＆LT; /选项＆GT;
＆LT; /选择＆GT;
＆LT; / SPAN＆GT;
＆LT; / DIV＆GT;......很多类似的形式，现场的div
＆LT; /表及GT;
 

CSS：

  .FORM文档
{
    填充：0.5％;
}.FORM场
{
    显示：inline-block的;
    保证金：2px的;
    宽度：210px; / *标签宽度+输入字段宽度* /
}.FORM标签
{
    填充左：5像素;
    填充右：5像素;
    FONT-FAMILY：宋体，黑体，无衬线;
    字体大小：小;
    显示：inline-block的;
    文本对齐：权利;
    宽度：960x75像素; / *通过最大宽度标题*确定/
}.FORM，全角
{
    宽度：120像素; / * * 210-5-75 /
}.FORM，自动完成
{
    宽度：100像素; / * 210-5-75-combobutton宽* /
}
.FORM-combobutton
{
    高度：1.09em;
    保证金：0 0 0像素;
    填充：0;
    保证金左：-6px;
    垂直对齐：中间;
    ！宽度：1EM重要;
}
 

解决方案

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

您还可以考虑使用像少了preprocessor如果你想使用变量来避免重复。你可以通过的NuGet小于或SASS和有教程不计其数那里。

Responsible form is created using code below. If window is resized, it resizes itself automatically, captions and input elements stay aligned.

It contains fixed values 210px, 75px, 100px, 120 px is css below. Is it reasonable and if yes, how to remove/replace those fixed values with something other like percents or em's ?

input, select elements and jquery-ui autocomplete with dropdown button are used.

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

解决方案

Looks ok to me though I personally use ems in most cases.

You could also consider using a preprocessor like LESS if you want to use variables to avoid repetition. You can get LESS or SASS via nuget and there are zillions of tutorials out there.

这篇关于如何更换负责任形式的CSS固定值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！