【发布时间】：2020-05-25 01:45:43
【问题描述】：
正如您在下图中所见，按钮的大小不相等，并且所有按钮之间的边距也不同。
我知道我可以为按钮提供固定宽度，但它会破坏响应式设计，因此我不想这样做。
当屏幕变小时，所有按钮都会溢出其他按钮，因此似乎响应式网格无法按预期工作。
我也想要 p-selectButton，因为我的意思是 2 个标志按钮应该贴在页面的末尾。但我不能用 margin-right:0px 做到这一点。
我也尝试过弃用的网格，但页面看起来一样。提前致谢。
我的html：
<div class="p-grid" style="background-color: #2c3e50;">
<div class="p-col-7">
<div class="p-grid">
<div class="p-xl-auto p-lg-1 p-md-3 p-sm-12" style="display: table;">
<p-button icon="pi pi-home" [label]="'anasayfa' | translate" routerLink="anasayfa" class="box"></p-button>
</div>
<div class="p-xl-auto p-lg-1 p-md-3 p-sm-12" style="display: table;">
<p-button class="box" icon="pi pi-info" [label]="'profil' | translate" routerLink="profil" [style.display]="loggedInUser ? '' : 'none'"></p-button>
</div>
<div class="p-xl-auto p-lg-1 p-md-3 p-sm-12" style="display: table;">
<p-button class="box" icon="pi pi-users" [label]="'calisanlar' | translate" routerLink="calisanlar" [style.display]="loggedInUser ? '' : 'none'"></p-button>
</div>
<div class="p-xl-auto p-lg-1 p-md-3 p-sm-12" style="display: table;">
<p-button class="box" icon="pi pi-sliders-v" [label]="'gorevler' | translate" routerLink="gorevler" [style.display]="loggedInUser ? '' : 'none'"></p-button>
</div>
<div class="p-xl-auto p-lg-1 p-md-3 p-sm-12" style="display: table;">
<p-button class="box" icon="pi pi-id-card" [label]="'musteriler' | translate" routerLink="musteriler" [style.display]="loggedInUser ? '' : 'none'"></p-button>
</div>
<div class="p-xl-auto p-lg-1 p-md-3 p-sm-12" style="display: table;">
<p-button class="box" icon="pi pi-shopping-cart" [label]="'urunler' | translate" routerLink="urunler" [style.display]="loggedInUser ? '' : 'none'"></p-button>
</div>
<div class="p-xl-auto p-lg-1 p-md-3 p-sm-12" style="display: table;">
<p-button class="box" icon="pi pi-briefcase" [label]="'varliklar' | translate" routerLink="finansalvarliklar" [style.display]="loggedInUser ? '' : 'none'"></p-button>
</div>
</div>
</div>
<div class="p-col-3"></div>
<div class="p-col-2" style="padding-top: 1.5em;">
<p-selectButton [options]="countries" [(ngModel)]="selectedCountry" optionLabel="name" (click)="translateService.use(selectedCountry.name)">
<ng-template let-item>
<div style="padding: 0.5em 1em;">
<img style="vertical-align: middle; margin-right: 0.5em;" src="assets/{{item.value.flag}}" height="25px" />
</div>
</ng-template>
</p-selectButton>
</div>
<router-outlet></router-outlet>
</div>
我的 scss 文件：
:host ::ng-deep .ui-button-text {
margin-left: 10px;
}
.box {
text-align: center;
padding-top: 1em;
padding-bottom: 1em;
}
【问题讨论】：