html - 使文本和复选框并排

Question

我想在一个单元格中并排放置一个文本和一个复选框。预期的结果喜欢

然而实际结果是复选框在文本上方。这意味着复选框占用一行，然后文本占用第二行。

我的代码

<kendo-grid-checkbox-column>
       <ng-template kendoGridCellTemplate let-dataItem>
          <input type="checkbox" [checked]="dataItem.Discontinued"> 
 {{dataItem.ProductName}}
       </ng-template>
  </kendo-grid-checkbox-column>

Answer 1

你可以使用标签:

<kendo-grid-checkbox-column>
   <ng-template kendoGridCellTemplate let-dataItem>
      <input type="checkbox" id="prod-name" class="k-checkbox" [checked]="dataItem.Discontinued"> 
      <label class="k-checkbox-label" for="prod-name">{{dataItem.ProductName}}</label>
   </ng-template>
</kendo-grid-checkbox-column>

要为复选框启用剑道样式，您应该将 class="k-ckeckbox"添加到输入中。