如何對齊三個圖標的頁面標題的

相關代碼：

<md-toolbar color="primary" class="main-toolbar"> 
    <div fx-layout="row" fx-flex fx-layout-align="space-between"> 
    <span class="page-headline"> 
     <img class="logo" src="./logo.png"/>club 
    </span> 
    <button md-icon-button class="main_menu_button1" (click)="dinnerClicked()"> 
     <md-icon>local_pizza</md-icon> 
    </button> 
    <button md-icon-button class="main_menu_button2" (click)="notificationsClicked()"> 
     <md-icon>notifications</md-icon> 
    </button> 
    <button md-icon-button class="main_menu_button3" (click)="eventsClicked()"> 
     <md-icon>event_note</md-icon> 
    </button> 
    </div> 
</md-toolbar>

我只是想在3個圖標緊密相鄰彼此對齊並向右對齊。如果我改變fx-layout-align到fx-layout-align-xs，我得到幾乎我想要的東西：

但到左，而不是向右......

我已經嘗試了許多CSS配置，但沒有爲我工作，有沒有簡單的方法來實現這個目標？非常感謝。

來源

2016-12-15 Idos

爲它創建的jsfiddle。 –

您需要'justify-content：flex-start' css屬性，請參閱這裏以獲取更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/。另外我的建議是不要在你的HTML中定義這個，但在CSS中！ –

您可以嘗試添加：'fx-layout-align =「start」'，如下所示：https://github.com/angular/flex-layout#api-overview –

如果您正在使用這個插件：https://github.com/angular/flex-layout#api-overview

我建議：

<md-toolbar color="primary" class="main-toolbar"> 
    <div fx-layout="row" fx-flex fx-layout-align="end" > 
    ... 
    </div> 
</md-toolbar>

來源

2016-12-15 07:49:29

這部分工作。它**正確**調整像我想要的圖標。但它也做的是將標題的所有內容向右移動。我只需要圖標即可移動。試圖創建另一個div，但它弄亂了內容以及它創建2個「級別」... – Idos

什麼'其他內容'被移動？它是否也是彈性盒的一部分？只是改變這些css屬性不應該改變flexbox之外的佈局。否則設置一個固定的大小可能工作？ –

'span'中的徽標和「俱樂部」--' 俱樂部' – Idos

只需添加下面的代碼在你的CSS：

<style> 
.main_menu_button1,.main_menu_button2,.main_menu_button3 
{ 
    float:right; 
} 
</style>

來源

2016-12-15 07:44:00

它已經浮動，你可以在第一張圖片中看到，並且通過fx-flex記號我很確定他使用了一個css flexbox的佈局 –

@JoelHarkes - 爲按鈕提供固定寬度可能會解決這個問題，如果它仍然保持不變。 –

如何對齊三個圖標的頁面標題的

回答

相關問題