离子标签与其基团未正确对齐

Question

{p1}标签中的

[bug]标签跳到顶部的另一组项目。

下面是代码

div

scss

  <div id="group">
    <div class="col" lines="none">
      <ion-label position="stacked">EXPIRY DATE</ion-label>
      <ion-input placeholder="MM/YY"></ion-input>
    </div>
    <div class="col" lines="none" id="div-security">
      <ion-label position="stacked">SECURITY CODE</ion-label>
      <ion-input placeholder="999"></ion-input>
    </div>
  </div>

  <!-- Inputs with labels that is messing up-->
  <div class="grouping" lines="none">
    <ion-label  display="block">ZIP/POSTAL CODE</ion-label>
    <ion-input placeholder="60001"></ion-input>
  </div>

预期输出

我的结果

Answer 1

尝试将Display:inline-block;添加到分组类中，如下所示：

 .grouping {
    display: inline-block;
    margin-top: 24px;
    background: transparent;
    border: 1px #000;
    width:100%;
    border-bottom-style: dotted;
  }

为我工作过，您可以添加width:100%（或添加拉伸的任何内容）。该Div默认是显示阻止您的问题的显示块。