在带有复选框的离子项目中，当您将其设置为换行时，如何使复选框在顶部对齐？

Question

我有一个 ion-list，每个项目都有一个 ion-checkbox 和一个 ion-label。有点像待办事项列表。问题是：我将 label 上的文本设置为换行 (class="ion-text-wrap")，但对齐方式不是我想要的：

我希望复选框在顶部而不是中间对齐。有办法吗？

Answer 1

解决此问题的最简单方法是在 input 和 label 周围放置一个容器，并使用 flexbox 布局模型。 Flexbox 会自动将 input 和 label 垂直对齐到容器的顶部，label 的换行文本将保留在复选框内。

HTML:

<div class="container">
  <input type="checkbox" name="val1" value="something">
  <label for="vehicle1"> I have a really long label that sits next to this checkbox and wraps around and around and around the box. Watch me go... </label>
</div>

CSS:

/* Set container with flex */
/* Children will automatically be aligned in a row */
.container {
  display: flex;
  margin: 15px 30px;
  max-width: 500px;
}

label {
  padding-left: 7px;
}

Codepen 上的演示： https://codepen.io/staypuftman/pen/mdJJWNq

Answer 2

ion-item 通过 item-native css class 显示 flex。所以你只需要 select 复选框和 align-self: start; 将其显示在顶部：

<ion-list class="checklist">
    <ion-item>
        <input type="checkbox">
        <label class="ion-text-wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet arcu mattis, auctor velit ut, suscipit lacus.</label>
    </ion-item>

    <ion-item>
        <input type="checkbox">
        <label class="ion-text-wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet arcu mattis, auctor velit ut, suscipit lacus.</label>
    </ion-item>
</ion-list>

与 css:

.checklist ion-item > input {
    align-self: start;
    margin-top: 0.3rem;
    margin-right: 0.3rem;
}

将呈现：

在 ionic 4 上测试过，你为什么不使用 ion-checkbox？

希望对您有所帮助！

在带有复选框的离子项目中，当您将其设置为换行时，如何使复选框在顶部对齐？

In an ion-item with a checkbox, when you set it to wrap, how do you make the checkbox align on the top?

css

word-wrap

ionic4