将图标对齐到按钮的末尾

Question

你能告诉我在按钮的最后放一个图标的正确方法吗？请参阅下面的代码：

HTML

<mat-grid-list cols="1" rowHeight="100px">
    <mat-grid-tile [colspan]="1" [rowspan]="1" >
        <div>
            <button mat-raised-button color="primary" flex class="expanded-button" style="text-align: left" [matMenuTriggerFor]="userprofile">
            <span>User Profile</span><mat-icon matSuffix style="float: right; position: relative;">chevron_right</mat-icon>
            </button>
        </div>

        <mat-menu #userprofile="matMenu" xPosition="before">
            <button mat-menu-item>View Profile</button>
            <button mat-menu-item >Change Password</button>
        </mat-menu>
    </mat-grid-tile>
</mat-grid-list>

CSS

.expanded-button {
    display: block;
    width: 190px;
}

.icon-in-menu {
    position: relative;
    margin-right: 5px;
}

根据我上面的代码，这就是我得到的：

箭头未与文字对齐。你能帮帮忙吗？谢谢。

Answer 1

也许只需查看代码并稍微简化一下。

希望这有助于你：

<button class="some-button">
  <span class="some-text">User Profile</span>
  <i class="some-icon">><i>
</button>

.some-button {
  width: 200px;
  height: 50px;
}

.some-text {
  float: left;
  margin-left: 10px;
}

.some-icon {
  float: right;
  margin-right: 10px;
}

https://codepen.io/anon/pen/jxQJjE