Html 如何使用剑道UI Web布局简单、对齐的表单

只是进入剑道UI网页，并试图找出布局简单表单的最佳方式。坦率地说，我对执行这样一项基本任务所缺乏的文档感到有点震惊。我正在使用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，看到它并认为我会尝试它…对tho没有帮助

---

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

据我所知，剑道不提供任何表单布局（但剑道移动提供）。这将取决于用户。一般来说，这是一个简单的方法，为标签提供CSS固定宽度，如图所示

---

剑道确实提供了这一点。您只需使用kendo.common.min.css中的classes editor标签和editor字段

例如：

<div class="editor-label">
    @Html.LabelFor(model => model.Description)
</div>
<div class="editor-field">
    @Html.TextBoxFor(model => model.Description, new { style="width:500px;" })
    @Html.ValidationMessageFor(model => model.Description)
</div>

@LabelFor（model=>model.Description）
@Html.TextBoxFor（model=>model.Description，新{style=“width:500px；”}）
@Html.ValidationMessageFor（model=>model.Description）

相同。这似乎根本不是一个样式化的样式。你必须有一些其他CSS冲突。在浏览器中仔细检查相关图元。Kendo UI v2016.1.420显示了定义为：.k-edit-form-container.编辑器标签{float:left；clear:both；宽度：30%；填充：.4em 0 1em；左边距：2%；文本对齐：right；}.k-edit-field、.k-edit-form-container.编辑器字段{float:right；clear:right；宽度：60%；右边距：2%；填充：0.6em；}例如，如果编辑器的宽度大于要将其放入的容器，则编辑器将在下一行或标签下方进行渲染。

<div class="editor-label">
    @Html.LabelFor(model => model.Description)
</div>
<div class="editor-field">
    @Html.TextBoxFor(model => model.Description, new { style="width:500px;" })
    @Html.ValidationMessageFor(model => model.Description)
</div>