css - 如何将文本与此列表项中的复选框垂直对齐？

Question

我正在引用一个代码笔示例，该示例显示了一个允许滑动和删除功能的 ionic 复选框列表。

我遇到的唯一问题是添加此功能后样式会变得一团糟。复选框文本没有像我需要的那样与复选框垂直对齐。它应该在右侧并与复选框图标垂直对齐

可以查看the sample codepen here并用它来扰乱样式。

ion-list 标记如下所示:

<ion-list show-delete="false"
            on-delete="onItemDelete(item)"
            can-swipe="true"
            option-buttons="itemButtons">

    <ion-item ng-repeat="item in items" item="item">
       <label class="checkbox">
        <input type="checkbox" ng-click="clickItem(item); $event.stopPropagation();" ng-model="item.checked">
        Item {{ item.id }}
      </label>

       <ion-option-button class="button-assertive icon ion-trash-a">
    </ion-item>

  </ion-list>

错误

右

Answer 1

<label class="checkbox">
  <input type="checkbox" ng-click="clickItem(item); $event.stopPropagation();" ng-model="item.checked" style="display:block;float:left;">
  <span style="display:block;float:left;line-height:28px;margin-left:10px;">Item {{ item.id }}</span>
</label>