如何在离子复选框旁边创建一个段落？答案

【问题标题】：How to create a paragraph next to an ionic check box?如何在离子复选框旁边创建一个段落？
【发布时间】：2021-09-12 05:09:16
【问题描述】：

Trying to create something like this text that wraps onto more than one line and with the checkbox vertically centered relative to the lines.

当前代码：

<div className = 'terms'>
   <IonCheckbox/>
   <span> paragraph </span>
</div>

CSS：

.terms {
    margin-top: 10vw;
    font-style: italic;

    ion-checkbox {
      margin-right: 2vw;
    }
  }

我需要段落是左对齐的块。相反，它只是环绕复选框。我尝试过使用各种东西，例如 float: left on the check-box, display: block

【问题讨论】：

标签： javascript css reactjs ionic-framework

【解决方案1】：

简单的方法是将所有内容都粘贴到弹性盒中。我这里没有离子，但它应该可以正常工作。如有必要，用 div 包裹复选框。

<div className = 'terms' style="display:flex">
   <div><input type="checkbox"></div>
   <span> paragraph </span>
</div>

【讨论】：

这会将文本变成我在复选框旁边寻找的块状形状，但由于某种原因，它会将复选框垂直拉伸成奇怪的细长形状。
我对 Ionic 不太熟悉，不知道，但我会在包装 div 上设置一个高度和宽度。

【解决方案2】：

我认为你使用 flexbox；

display: flex;
justify-content: flex-start;
flex-direction: row;

【讨论】：

这会在复选框周围创建一个向后的 L 形。我需要它是复选框旁边的左对齐块。
其实很抱歉，我正在查看我的旧代码。这会将文本变成我正在寻找的块形状。但是，它会将复选框垂直拉伸成这种奇怪的细长形状。

【解决方案3】：

在 IonCheckbox 中使用 slot 选项

<IonItem>
        <IonLabel ><i>paragraph </i></IonLabel>
        <IonCheckbox slot="start" />
  </IonItem>

【讨论】：

标签不允许文本换行并切断段落第一行之后的所有内容。
将此样式添加到 IonLabel white-space: normal;

【解决方案4】：

ion-checkbox {
      vertical-align: top;
      margin-right: 5px;
    }
    span {
      display: inline-block;
      width: 80%;
      font-style: italic;
      color: grey;
    }

【讨论】：

虽然此代码可能会回答问题，但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。