2013-11-21 81 views
0

我想擁有一個如下所示的頂部導航欄: div = [],space =。css頂部導航 - 左側導航(菜單),標題在中心,右側(更多按鈕) - howto?

[菜單圖標] [標誌] ... [頁標題] ..... [某些圖標] [某些圖標]

所以菜單和標誌區堅持走剩下。
頁面標題在中間。
2個更多的圖標粘在右邊。

我嘗試了幾種方法,但都沒有爲我工作。
我最好的解決方案包含了一切,但鏈接/圖標不可點擊,文本「超過」它們。

感謝任何幫助。

這裏是我對它的plunker: http://plnkr.co/edit/CBnH6Ewa4QJTu5FBC2Mi

======編輯===== 感謝@馬克辛普森,我固定在CSS一個錯字,並在標題欄爲中心,鏈接可通過在中心件上使用z-index:-1進行點擊。
但我想它的標題也是可點擊的。
我在一些頁面上使用它。
關於如何用css解決這個問題的任何建議?

回答

0
.navbar .center { 
    width: 60%; 
    margin: 0 auto; 
    text-align: center; 
} 

.navbar .right { 
    position: absolute; 
    right: 0; 
    top: 0; 
} 

參見:http://plnkr.co/edit/1XLrK4Iuq6CPSYmGPDYn?p=preview

+0

泰完美的作品。如果我希望中心區域可點擊,是否也有解決方案?使用這種解決方案它是「後面」的div,不能點擊。 – samz

+0

@samz Yup。我已經更新了我的答案。給它一個明確的寬度,足夠窄,不會覆蓋圖標。 –

+0

@mark_simspon:最後一個建議會把標題放在中間,但是右邊的圖標放下一行:( – samz