如何使我的离子输入与我的离子项目宽度相等

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>

宽度太宽。

Answer 1

您可以使用 https://ionicframework.com/docs/layout/css-utilities and lines="inset" or lines="full" from https://ionicframework.com/docs/api/item

中的 class="ion-padding"

选项 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>

如何使我的离子输入与我的离子项目宽度相等

How do I make my ion-input equal width with my ion-item

css

layout

ionic-framework

ion-item