css - 如何使我的离子输入与我的 ion-item 宽度相等

Question

我的ion-input元素有一条横跨视图整个宽度的灰线。我想要它，所以这条线等于ion-item元素。

    <ion-content padding>
      <ion-list>
        <ion-item>
          <ion-label>
            <h1><strong>{{$route.params.excercise}}</strong> working set weight</h1>
            <p>Include bar and plates</p>
          </ion-label>
        </ion-item>
        <ion-item>
          <ion-input placeholder="... kg" type="number" min="0" step="1.25"></ion-input>
        </ion-item>
      </ion-list>
      ...

<style scoped>
ion-input {
  width: inherit; // doesn't work
}
</style>

宽度太宽。

标签： cssionic-frameworklayoution-item

Answer 1

您可以class="ion-padding"从https://ionicframework.com/docs/layout/css-utilities和lines="inset"/或lines="full"从https://ionicframework.com/docs/api/item使用

选项1：

 <ion-list class="ion-padding">
      <ion-item lines="full">
        <ion-label>
          <h1><strong>Squat</strong> working set weight</h1>
          <p>Include bar and plates</p>
        </ion-label>
      </ion-item>
      <ion-item lines="full">
        <ion-input placeholder="... kg" type="number" min="0" step="1.25"></ion-input>
      </ion-item>
</ion-list>

选项 2：

<ion-content class="ion-padding">
  <ion-list>
      <ion-item lines="inset">
        <ion-label>
          <h1><strong>Squat</strong> working set weight</h1>
          <p>Include bar and plates</p>
        </ion-label>
      </ion-item>
      <ion-item lines="inset">
        <ion-input placeholder="... kg" type="number" min="0" step="1.25"></ion-input>
      </ion-item>
  </ion-list>
</ion-content>