如何讓文本旁邊的按鈕？

嘿傢伙我需要讓這兩個按鈕旁邊的名稱，我該怎麼做？它們總是出現在這個詞的下面。如何讓文本旁邊的按鈕？

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

來源

2017-07-05 Ygor Fraga

我找到的解決方案是這樣：

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

謝謝大家的答案！

來源

2017-07-07 18:10:47

這裏是你需要的東西：

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

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

來源

2017-07-05 02:35:13

我試過了，但沒有工作 –

嗯，我想知道解析到你的'service.name'中的值是否包含''\ n''？ –

不，只有一個像'繪畫'這樣的名字，但我會嘗試使用另一個值，另一個變量 –

h2是塊標記，這意味着它總是試圖拿起它擁有林即你可以通過重寫它的顯示風格來繞過這個。

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

但是，這是一個非常特別的解決方案。你真的想在風格上思考，爲什麼你想要在同一條線上。因爲使用h2作爲內聯標記類似於告訴HTML引擎「我想要標題，但我不希望它成爲標題」。也許考慮在span中設置一些文本，並使用CSS來擴大它，如果你只是想放大文本。

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

這使你基本上相同的視覺效果，但是現在你不能對抗HTML得到它。

來源

2017-07-05 02:38:24

我嘗試了兩種方法，但它在Ionic上不起作用。 –

嘗試在CSS中使用此功能。

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

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

來源

2017-07-05 04:04:08 coder8888

如何讓文本旁邊的按鈕？

回答

相關問題