订单输入表单是根据数据库中定义的字段创建的。 每个字段都包含文本标题和输入元素。
输入元素是输入类型=文本、复选框或选择元素。 如果也可以是 jquery ui 自动完成或在右侧包含下拉按钮的日期选择器。 使用 JQuery UI。
在输出中输入元素未对齐。看起来很乱:
如何提高这种布局的可读性？
如何垂直对齐输入元素的左侧，以便它们从同一列开始？ 如果调整浏览器窗口的大小，新列应自动出现或删除。
也许有一些神奇的 css 或 jquery ui 功能允许这样做？ 也可以使所有字段宽度相同。每个输入元素的最小宽度 在数据库中定义。渲染的宽度可以稍微大一些。对于字幕，可以进行两次渲染:在第一次渲染中找到字幕中的最大字符数并计算每个字幕的宽度。
使用的 html 是:
<form id='_form' class='form-fields'>
<div class='form-field'>
<label class='form-label' for='Klient0_nimi'><u>Customer</u></label>
<span id='span_Klient0_nimi'><input id='Klient0_nimi' name='Klient0_nimi' style='width:100px' class='ui-widget-content ui-corner-all' maxlength='80' lookup='Klient' value='Brad Abrams' ></input>
<button type='button' class='form-combobutton' tabindex=-1 ></button>
</span>
</div>
<div class='form-field'>
<label class='form-label' for='Tasudok'>Number</label>
<input class='ui-widget-content ui-corner-all' id='Tasudok' name='Tasudok' value='798' style='width:100px' maxlength='25' />
</div>
<div class='form-field'>
<label class='form-label' for='Kuupaev'>Date</label>
<input maxlength=10 size=10 class='ui-widget-content ui-corner-all' id='Kuupaev' name='Kuupaev' value='1/26/2012' />
</div>
<div class='form-field'>
<label class='form-label' for='Maksetin1_tingimus'><u >Condition</u></label>
<span><select id='Maksetin1_tingimus' name='Maksetin1_tingimus' class='ui-widget-content ui-corner-all' style='width:100px'
lookup='Maksetin' value='10' >
<option value=''></option>
<option value='10'>10 days</option>
</select>
</span>
</div>
<div class='form-field'>
<label class='form-label' for='Eimuuda'>No change</label>
<input type='hidden' value='false' name='Eimuuda' />
<input type='checkbox' id='Eimuuda' name='Eimuuda'/>
</div>
<div class='form-field'>
<label class='form-label' for='Doksumma'>Total</label><input style='text-align:right' id='Doksumma' name='Doksumma' disabled='disabled' class='jqgrid-readonlycolumn' readonly='readonly' tabindex='-1' value='0.00' style='width:100px' maxlength='0' />
</div>
</form>
最佳答案
您可以使用一些列对齐方式:第一列是标签，第二列是输入字段。
最终您可以使用 4 列:第 1 和第 3 列是标签，第 2 和第 3 列是输入字段。
此外，在输入字段上使用 width:100%。您可能需要考虑 text-align:right 标签。
旧的 html 表格可能对您有所帮助。
由于您有很多字段，您可能需要考虑将表单分成几个部分；喜欢用 <fieldset>和 <legend>正如解释的那样 here
例子:
<!DOCTYPE html>
<html>
<body>
<style type="text/css">
.lbl {
text-align: right;
width: 100px;
white-space: nowrap;
}
.fld {
width: 100%;
}
.frm {
display: inline-block;
}
</style>
</head>
<form>
<fieldset>
<legend>Person</legend>
<div class="frm">
<table>
<tr>
<td class="lbl"><label for="name">Name:</label></td>
<td><input class="fld" id="name" type="text"></td>
</tr>
<tr>
<td class="lbl"><label for="email">Email:</label></td>
<td><input class="fld" id="email" type="text"></td>
</tr>
<tr>
<td class="lbl"><label for="dob">Date of birth:</label></td>
<td><input class="fld" id="dob" type="text"></td>
</tr>
</table>
</div>
<div class="frm">
<table>
<tr>
<td class="lbl"><label for="addr">Address:</label></td>
<td><input class="fld" id="addr" type="text"></td>
</tr>
<tr>
<td class="lbl"><label for="city">City:</label></td>
<td><input class="fld" id="city" type="text"></td>
</tr>
<tr>
<td class="lbl"><label for="ctry">Country:</label></td>
<td><input class="fld" id="ctry" type="text"></td>
</tr>
</table>
</div>
</fieldset>
</form>
</body>
</html>
结果如下:
当有足够的水平空间时:
水平空间不足时:
关于javascript - 如何将输入元素排列到列或其他方式以提高表单的可读性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14038518/