定位圖標旁邊的按鈕上的文字離子

我需要定位按鈕旁邊的文字選中圖標。圖標在點擊事件中顯示/隱藏，具體取決於按鈕是否被點擊。我設法把它放在裏面，並顯示它或隱藏它的點擊，但是當我表現出來，圖標按鈕按下一個文本位向左。按鈕文本應該固定在按鈕的中間，並且複選標記圖標應該出現在空白區域，而不必將按鈕文本向左推。定位圖標旁邊的按鈕上的文字離子

這是應該的樣子：

這是我走到這一步：

正如你所看到的，「上午02時」被推到一點左邊，它不應該。

<button ion-button [color]="i.active 
     ? 'primary' 
     : 'light' 
     " 
     block 
     (click)="onToggleReminder(i)"> 
     <span> 
      {{i.label}} 
     </span> 
     <ion-icon name="checkmark" float-right [hidden]="!i.active"></ion-icon> 
     </button> 


    .button { 
     border-radius: 16px; 
     font-family: 'Roboto', sans-serif; 
     font-size: 16px; 
     font-weight: bold; 
     height: 45px; 
    } 
    span { 
     margin-right: 5px; 
    }

來源

2017-08-01 karlo1zg

有你改變了保證金正確的價值觀？ –

@ShinoyShaji是的，那保證金是存在的，所以我在按鈕上的文字和圖標之間得到一點空間。即使我刪除空白區域的圖標推文有點左，它們相互靠近 – karlo1zg

的問題是，該圖標都默認，因爲它是推動按鈕上的文字向左的一些寬度。所以解決方案是我指定圖標的寬度爲1px，這足以將它放在按鈕文本旁邊，而不會將其推到左側並仍然使圖標可見。

ion-icon { 
     width: 1px; 
    }

來源

2017-08-01 14:39:25 karlo1zg

嗯，我認爲很明顯這個圖標大小不同。也許試圖讓它變小？

來源

2017-08-01 11:09:59

雖然這不是一個真正的解決方案，你的回答幫我找到解決辦法，所以我投了你的答案。 – karlo1zg

定位圖標旁邊的按鈕上的文字離子

回答

相關問題