如何使用Kendo UI Web布局简单的、对齐的表单
如何使用Kendo UI Web布局简单的、对齐的表单
提问于 2013-04-14 22:58:25
只是进入Kendo UI Web，并试图找出布局简单表单的最佳方法。坦率地说，我对缺乏执行这种基本任务的文档感到有点震惊。我正在使用kendo.bootstrap主题，并试图弄清楚如何组织一个简单的表单，其中标签在一列中，关联的输入在另一列中，两者都正确对齐，等等。
如果您按照文档创建具有textbox控件和标签的简单窗体，则文本框控件不会在其示例上对齐properly...even。
使用以下代码来演示这一点：
<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是否提供了任何固定或流动的网格系统来帮助布局表单，或者是用户对此负责？谢谢..。
回答 2
Stack Overflow用户
发布于 2013-04-15 08:41:12
据我所知，Kendo不提供任何表单布局(但是Kendo Mobile提供)。这将取决于用户。一般来说，这是一个简单的，如为您的标签提供CSS固定宽度，如here所示。
.k-textbox {
width: 11.8em;
}
label {
display: inline-block;
width: 90px;
text-align: right;
}Stack Overflow用户
发布于 2014-05-07 02:28:50
剑道确实提供了这一点。您只需在kendo.common.min.css中使用类editor-label和editor-field
示例：
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16000420
复制相关文章
相似问题
腾讯云开发者
