如何使用Kendo UI Web佈局簡單的對齊表單

剛剛進入Kendo UI Web，並試圖找出佈局簡單表單的最佳方式。坦率地說，對於缺乏執行這樣基本任務的文檔，我有點震驚。我正在使用kendo.bootstrap主題，並試圖弄清楚如何組織一個簡單的表單，其中標籤位於一列中，而關聯的輸入位於另一列中，兩者都正確對齊等。如何使用Kendo UI Web佈局簡單的對齊表單

如果您關注使用文本框控件和標籤創建簡單表單的文檔，文本框控件無法正確對齊......即使是在它們的示例中。

使用下面的代碼來證明這一點：

<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標籤，看到它，我想我會嘗試一下......不利於壽。

我查看了所有的樣式文檔，並沒有看到任何有助於創建簡單但風格化表單的內容。 Kendo UI Web是否提供任何固定或流暢的網格系統來幫助佈局表單，或者是用戶對此負責？ Thx ...

來源

2013-04-14 Randy Brown

據我所知，劍道不提供任何形式佈局（但是劍道移動不）。這將取決於用戶。一般來說，爲標籤提供CSS固定寬度很簡單，如here所示。

  .k-textbox { 
       width: 11.8em; 
      } 

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

來源

2013-04-15 00:41:12 CodingWithSpike

劍道提供這個。你只需要使用類編輯器，標籤和編輯場在kendo.common.min.css

例子：

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

來源

2014-05-06 18:28:49 PAULDAWG

不爲我工作。該標籤在場地上方。 – Coxy

相同。這似乎不是一個程式化的。 – RobStone

你必須有一些其他的CSS衝突。重複檢查相關元素的瀏覽器檢查。 Kendo UI v2016.1.420顯示的類定義爲： .k-edit-form-container .editor-label {float：left; 明確：均; 寬度：30％; 填充：.4em 0 1em; margin-left：2％; text-align：right; } .k-edit-field， .k-edit-form-container .editor-field { float：right; 明確：正確; 寬度：60％; 保證金率：2％; 填充：0 0 .6em; } – PAULDAWG

如何使用Kendo UI Web佈局簡單的對齊表單

回答

相關問題