Question

嘿伙计们，我需要让这两个按钮放在一个名字旁边，我该怎么做？它们总是出现在单词之下。

<ion-list>
    <ion-item *ngFor="let service of services">
        <h2>{{service.name}}</h2>
        <button ion-fab mini color="danger"><ion-icon name="trash"></ion-icon></button>
        <button ion-fab mini color="secondary"><ion-icon name="create"></ion-icon></button>
    </ion-item>
</ion-list>

Answer 1

尝试在CSS中使用它。

＆＃13;

        h2 {
        margin: 0;
        display: inline-block;
        }

＆＃13;

         <ion-list>
            <ion-item *ngFor="let service of services">
                <h2>{{service.name}}</h2>
                <button ion-fab mini color="danger"><ion-icon name="trash"></ion-icon>  </button>
                <button ion-fab mini color="secondary"><ion-icon name="create"></ion-icon></button>
            </ion-item>
        </ion-list>

＆＃13;

Answer 2

以下是您的需求：

<h2 style="display: inline;">{{service.name}}</h2>

＆＃13;

<ion-list>
    <ion-item *ngFor="let service of services">
        <h2 style="display:inline;">{{service.name}}</h2>
        <button ion-fab mini color="danger"><ion-icon name="trash"></ion-icon></button>
        <button ion-fab mini color="secondary"><ion-icon name="create"></ion-icon></button>
    </ion-item>
</ion-list>

＆＃13;

Answer 3

h2是一个块标记，这意味着它总是试图占用自己的行。您可以通过覆盖其显示样式来避免这种情况。

＆＃13;

<ion-list>
    <ion-item *ngFor="let service of services">
        <h2 style="display:inline;">{{service.name}}</h2>
        <button ion-fab mini color="danger"><ion-icon name="trash"></ion-icon></button>
        <button ion-fab mini color="secondary"><ion-icon name="create"></ion-icon></button>
    </ion-item>
</ion-list>

＆＃13;

但这是一个非常特别的解决方案。你真的想在风格上思考为什么你想要它在同一条线上。因为使用h2作为内联标记类似于告诉HTML引擎＆＃34;我想要一个标题，但我不希望它是标题＆＃34;。也许考虑在span中设置一些文字并使用CSS将其设置得更大，如果你只是想要放大文字。

＆＃13;

<ion-list>
    <ion-item *ngFor="let service of services">
        <span style="font-size:1.5em;font-weight:bold;">{{service.name}}</span>
        <button ion-fab mini color="danger"><ion-icon name="trash"></ion-icon></button>
        <button ion-fab mini color="secondary"><ion-icon name="create"></ion-icon></button>
    </ion-item>
</ion-list>

＆＃13;

这给你带来了基本相同的视觉效果，但现在你并没有反对HTML来获取它。

Answer 4

我找到的解决方案就是这个：

<ion-list>
  <ion-item *ngFor="let service of services | orderBy: 'name'">
    <ion-label>{{service.name}}</ion-label>
    <button (click)="onActive(service.detalhe.id)" *ngIf="service.isActive" ion-button outline item-right>Desativar</button>
    <button (click)="onActive(service.detalhe.id)" *ngIf="!service.isActive" ion-button outline item-right>Ativar</button>
    <button (click)="openUpdatePage(service)" ion-fab mini color="secondary" item-right><ion-icon name="create"></ion-icon></button>
    <button (click)="deleteService(service)" ion-fab mini color="danger" item-right><ion-icon name="trash"></ion-icon></button>
  </ion-item>

谢谢大家的答案！

如何让文本旁边的按钮？

4 个答案: