2

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

输入元素是输入类型=文本、复选框或选择元素。如果也可以是 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

4 回答 4

4

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

最终您可以使用 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>

这将是结果：

当水平空间足够时：

在此处输入图像描述

当水平空间不足时：

在此处输入图像描述

于 2012-12-26T09:35:53.907 回答
1

您可以使用 table 而不是使用 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>
于 2012-12-26T09:33:32.597 回答
1

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

您还应该右对齐标签，而不是左对齐它们（即像 Luigi 的回答）

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

于 2012-12-26T10:57:56.277 回答
0

一般来说，在线表单的纯 CSS 解决方案并不容易。幸运的是，Wufoo 的一些聪明人制作了一些优秀的 CSS 表单，我可以从中学习。他们基于 CSS 的在线表格示例：

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

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

于 2012-12-26T22:29:50.150 回答