html - 如何使用 Kendo UI Web 布局简单、对齐的表单

Question

刚刚进入 Kendo UI Web，并试图找出布局简单表单的最佳方式。坦率地说，我对缺乏执行此类基本任务的文档感到有点震惊。我正在使用 kendo.bootstrap 主题并试图弄清楚如何组织一个简单的形式，其中标签在一列中，相关输入在另一列中，两者都正确对齐等。

如果您按照文档创建带有文本框控件和标签的简单表单，文本框控件不会正确对齐...即使在他们的示例中也是如此。

使用下面的代码来演示这一点:

<div>
<ul class="forms">
    <li>
        <label class="k-label">Username:</label>
        <input type="text" class="k-textbox" />         
    </li>
    <li>
        <label class="k-label">Password:</label>
        <input type="text" class="k-textbox" />         
    </li>
</ul>

不确定是否需要 k-label，看到它并认为我会尝试一下......但没有帮助。

我查看了所有样式文档，但没有看到任何有助于创建简单但样式化的表单的内容。 Kendo UI Web 是否提供任何固定或流动的网格系统来帮助布局表单，或者用户对此负责？谢谢...

Answer 1

据我所知，Kendo 不提供任何表单布局功能(但 Kendo Mobile 提供)。这将取决于用户。一般来说，为标签提供 CSS 固定宽度很简单，如 here 所示。 .

            .k-textbox {
                width: 11.8em;
            }

            label {
                display: inline-block;
                width: 90px;
                text-align: right;
            }