定位图标旁边的按钮上的文字离子

我需要定位按钮旁边的文字选中图标。图标在点击事件中显示/隐藏，具体取决于按钮是否被点击。我设法把它放在里面，并显示它或隐藏它的点击，但是当我表现出来，图标按钮按下一个文本位向左。按钮文本应该固定在按钮的中间，并且复选标记图标应该出现在空白区域，而不必将按钮文本向左推。定位图标旁边的按钮上的文字离子

这是应该的样子：

这是我走到这一步：

正如你所看到的， “上午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

定位图标旁边的按钮上的文字离子

回答

相关问题