HTML - 按鈕中的圖標麻煩

由於某些原因，我的按鈕內部的圖標是其中的一半，儘管它們內部有足夠的空間。爲什麼會這樣，我該如何解決它？另外，用我的CSS我有按鈕設置爲藍色，但每當他們被禁用，按鈕是白色的。我如何讓他們在禁用時不改變顏色？謝謝！HTML - 按鈕中的圖標麻煩

tfoot, 
 
thead { 
 
    background-color: blue; 
 
    color: white; 
 
} 
 

 
i { 
 
    color: white; 
 
    vertical-align: middle; 
 
} 
 

 
button { 
 
    background-color: blue; 
 
} 
 

 
.footertext { 
 
    float: right; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
}

<td colspan="6"> 
 
    Requests: 
 
    <button [disabled]="!isNextValid()" class="form-control" style="width: 50px; height: 25px; float: right;" (click)="nextEmployee()"><i class="fa fa-caret-right fa-2x" aria-hidden="true"></i></button> 
 
    <label style="float: right;">{{selectedEmployee+1}} of {{empInfo.length}}</label> 
 
    <button [disabled]="!isPreviousValid()" class="form-control" style="width: 50px; height: 25px; float: right;" (click)="previousEmployee()"><i class="fa fa-caret-left fa-2x" aria-hidden="true"></i></button> 
 
</td>

來源

2017-06-05 asdf

也許你可以提供生成的HTML而不是模板標記。既然你使用Bootstrap，我也會包含這個CSS。另外，Bootstrap有一個網格系統，所以我假設你不需要使用'table'。 – hungerstar

這是因爲你使用的是按鈕元件上的固定寬度。使用填充來調整大小，而不是固定的。這將允許您的按鈕正確縮放其內容。這也將保持標籤和圖標正確居中在按鈕中。

事情是這樣的：

<button [disabled]="!isNextValid()" class="form-control" style="padding: 15px 30px; float: right;" (click)="nextEmployee()"><i class="fa fa-caret-right fa-2x" aria-hidden="true"></i></button>

來源

2017-06-05 20:58:41 Korgrue

，只是使他們整個屏幕的長度，也沒有解決問題 – asdf

那麼你有機會將你的按鈕設置爲顯示塊。嘗試設置按鈕以顯示：inline-block;代替。 – Korgrue

HTML - 按鈕中的圖標麻煩

回答

相關問題