テキストの隣にボタンを置く方法は？

Question

ねえ、私はこれらの2つのボタンを名前の隣に置く必要があります、どうすればいいですか？それらは常に単語の下に表示されます。ここで

<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

ソリューションでした。この1：

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

が回答をありがとうございました！

Answer 2

何が必要です：

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

Answer 3

h2は、それは常にそのを取るしようとする意味のブロックタグであり、自分のlin e。表示スタイルをオーバーライドすることでこれを回避できます。

<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と戦っていない

。

Answer 4

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>