如何在Ionic List中使Ion-input逐个垂直排列（Ionic3）

嘿，作为Ionic 3新手遇到布局调整问题太正常啦！我来一步步教你把并排的输入字段改成垂直逐个排列～

先分析问题根源 #

通常输入字段并排，大概率是因为你用了ion-row + ion-col的网格布局，或者给输入容器加了横向排列的CSS样式（比如display: inline-block/float: left）。咱们针对不同场景来调整：

场景1：用了Ionic Grid（ion-row/ion-col） #

如果你的原代码是类似这样的并排布局：

<ion-row>
  <ion-col>
    <ion-item>
      <ion-label>用户名</ion-label>
      <ion-input type="text"></ion-input>
    </ion-item>
  </ion-col>
  <ion-col>
    <ion-item>
      <ion-label>邮箱</ion-label>
      <ion-input type="email"></ion-input>
    </ion-item>
  </ion-col>
</ion-row>

修改方案：
把每个输入字段单独放在自己的块级容器里，要么直接去掉ion-row（因为ion-item默认是块级元素，会占满整行）：

<!-- 直接移除ion-row，每个ion-item自动垂直排列 -->
<ion-item>
  <ion-label>用户名</ion-label>
  <ion-input type="text"></ion-input>
</ion-item>
<ion-item>
  <ion-label>邮箱</ion-label>
  <ion-input type="email"></ion-input>
</ion-item>

或者如果你还想保留网格结构，就给每个输入字段单独分配一行：

<ion-row>
  <ion-col>
    <ion-item>
      <ion-label>用户名</ion-label>
      <ion-input type="text"></ion-input>
    </ion-item>
  </ion-col>
</ion-row>
<ion-row>
  <ion-col>
    <ion-item>
      <ion-label>邮箱</ion-label>
      <ion-input type="email"></ion-input>
    </ion-item>
  </ion-col>
</ion-row>

场景2：自定义了横向排列的CSS样式 #

如果你的输入字段加了类似这样的自定义类：

.inline-input {
  display: inline-block;
  width: 48%;
  float: left;
}

修改方案：
调整CSS让容器变成块级元素，占据整行：

/* 替换原来的横向样式 */
.vertical-input {
  display: block;
  width: 100%;
  float: none; /* 清除浮动 */
}

然后把HTML里的类名换成vertical-input就好啦。

小提示 #

如果你不确定是哪里的问题，可以检查一下：

• 有没有给输入容器加ion-col或者横向布局的类
• 有没有自定义CSS影响了元素的display属性

只要让每个输入字段的容器（比如ion-item）成为块级元素，它们就会自动从上到下垂直排列啦！

内容的提问来源于stack exchange，提问作者Sivakumar Tadisetti