Совместите значок с концом кнопки - PullRequest
Новая
       9

Совместите значок с концом кнопки

0 голосов
/ 18 мая 2018

Подскажите, пожалуйста, как правильно разместить значок в самом конце кнопки?Пожалуйста, смотрите мой код ниже:

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

С моими кодами выше, этовот что я получаю:

enter image description here

Стрелка не выровнена по тексту.Можете ли вы помочь, пожалуйста?Спасибо.

1 Ответ

0 голосов
/ 18 мая 2018

Может быть, просто посмотрите ваш код и немного упростите его.

Надеюсь, это поможет вам: 

<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

...