如何使用 ionic-3 中的离子输入删除 ion-item 中不必要的填充？

【问题标题】：How to remove unnecessary padding in ion-item with ion input in ionic-3?如何使用 ionic-3 中的离子输入删除 ion-item 中不必要的填充？
【发布时间】：2019-03-04 08:10:08
【问题描述】：

<ion-row align-items-center>
   <ion-col col-3></ion-col>
   <ion-col text-right  no-padding col-4.5> 
      Canister Width <p>(C.W.)</p>:
   </ion-col>
   <ion-col no-lines ion-item no-padding>
      <ion-input></ion-input>
   </ion-col>
</ion-row>

【问题讨论】：

标签： ionic-framework ionic3

【解决方案1】：

试试这个？

 <ion-row align-items-center no-padding>

或者您可以添加<div no-padding> ?

【讨论】：

【解决方案2】：

您不能从具有ion-item 属性的标记中的item 中删除填充，因为具有填充的不是ion-item，而是内部生成的item-inner 子级。

这就是 no-padding 不起作用的原因，但您可以像这样使用 css 来简单地做到这一点

.item .item-inner {
  padding-left: 0px;
}

希望这会有所帮助。

【讨论】：

【解决方案3】：

将以下代码添加到您的 css 中

ion-item{padding:0 !important}

或

您可以在 HTML 文件中添加内联 css

<ion-row align-items-center>
   <ion-col style="padding:0"> 
      Canister Width <p>(C.W.)</p>:
   </ion-col>
</ion-row>

【讨论】：