Question

订单输入表单是从数据库中定义的字段创建的。每个字段都包含文本标题和输入元素。

输入元素是输入类型=文本，复选框或选择元素。如果还可以在右侧包含下拉按钮的jquery ui autocomplete或datepicker。使用了JQuery UI。

在输出中，输入元素未对齐。它看起来很乱：

messy form

如何提高此布局的可读性？

如何垂直对齐输入元素的左侧，使它们从同一列开始？如果调整浏览器窗口的大小，则应自动显示或删除新列。

也许有一些神奇的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>

Answer 1

您可以使用一些列对齐：第一列是标签，第二列是输入字段。

最终你可以使用4列：第1和第3列的标签，第2和第3的输入字段。

另外，在输入字段上使用width：100％。您可能需要考虑text-align：right for label。

旧的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>

这将是结果：

当水平空间足够时：

enter image description here

当水平空间不足时：

enter image description here

Answer 2

您可以使用表而不是使用div。制作6列或尽可能多的列。

 <table>
        <tr>
            <td style="width: 20%;">
            </td>
             <td style="width: 20%;">
            </td>
             <td style="width: 20%;">
            </td>
            <td style="width: 20%;">
            </td> 
            <td style="width: 20%;">
            </td>
        </tr>
        <tr>
            <td style="width: 20%;">
            </td>
             <td style="width: 20%;">
            </td>
             <td style="width: 20%;">
            </td>
            <td style="width: 20%;">
            </td> 
            <td style="width: 20%;">
            </td>
        </tr>

    </table>

Answer 3

您正在寻找“响应式设计”解决方案。这通常是使用基于网格的样式表实现的，例如这个非常简单直接的12列网格http://cssgrid.net/

你也应该正确对齐你的标签，而不是左对齐它们（比如Luigi的回答）

不要使用表格进行布局。表格用于表格数据。

Answer 4

一般来说，在线表单的纯CSS解决方案并不容易。幸运的是，Wufoo的一些有才华的人已经制作了一些我可以学习的优秀CSS形式。他们的CSS形式在线示例：

示例页面： http://www.wufoo.com/examples/#eventregistration

多列表单示例： https://examples.wufoo.com/forms/s7p7s5/

如何将输入元素排列到列或其他方式以提高表单可读性

4 个答案: