Question

我正在创建一个离子选择，并且该选择中的一项具有3个值（强度，弱点，装甲，即）我希望这三个值在ion-select-option上均匀分布，但我似乎不知道如何做到。

我尝试了各种CSS和html选项，这是我最新的（失败的）实验。

            <ion-select class="simple-select" placeholder="Select One"
                interface="action-sheet">
                <ion-select-option *ngFor="let knight of knights" class="ion-text-wrap">
                <ion-item>
                    <ion-label  slot="start">{{knight.strength}}</ion-label>
                    <ion-label>{{knight.weakness}}</ion-label>
                    <ion-label  slot="end">PPknight.armor}}</ion-label>
                </ion-item>
                </ion-select-option>
            </ion-select>

Answer 1

您应该能够通过Flex，CSS或使用Angular's Flex Layout指令来做到这一点。

（这些是粗略的示例，可能需要进行调整） CSS：

.container {
  display: flex; /* or inline-flex */
  flex-direction: row;
}

FlexLayout：

<ion-item fxLayout="row">
  <ion-label fxFlex>{{knight.strength}}</ion-label>
  <ion-label fxFlex>{{knight.weakness}}</ion-label>
  <ion-label fxFlex>PPknight.armor}}</ion-label>
</ion-item>

离子在<ion-select-option>上均匀分布内容

1 个答案: