nav-bar：對齊內嵌文字，左右

基本上，我希望「名稱」位於導航欄的左側，而「關於」「聯繫人」和「帳戶」保留在導航欄的右側-酒吧。nav-bar：對齊內嵌文字，左右

.name { 
    font-family: "ChunkFive"; /* works */ 
    font-size: 22px;   /* works */ 
    color: #32B432;   /* doesn't */ 
    text-align: left;   /* doesn't */ 
}

我用利類= 「名」，一個UL內，一個DIV ID內，一個NAV類內。

我不知道要更改哪種父母或孩子的風格。（我想將「Name」的顏色也改爲綠色，但它也不起作用）。

來源

2015-04-19 Serendipity

position：absolute; top：-560px; left：30px;把它寫在你的名字 –

下面是更新了自己的小提琴應該做你想要什麼：https://jsfiddle.net/etw2q6sL/4/

顏色規則不工作是因爲你的其他規則#mainNav a指定的導航所有鏈接的顏色，這比更具體你的.name規則，所以瀏覽器從前者中選擇顏色。爲了使這項工作可以隨心所欲，我會通過向其選擇器添加額外的條件來使.name規則更加具體 - 例如，將其更改爲#mainNav .name a。要了解有關CSS特性（應用規則的順序）的更多信息，請查看：https://css-tricks.com/specifics-on-css-specificity/

在對齊問題上，您將文本對齊與列表項的位置混淆在一起。 text-align: left將簡單地對齊任何內聯內容（例如文本，跨度等），並將其與當前列表項左側對齊 - 它不會將列表項與nav中的左側對齊。

取而代之的是這是一個float。我所做的是將你的名單分成兩個單獨的名單，其中一名申請float: left，另一名float: right。這些浮標將兩個列表拉到導航的左側和右側。本文可能會幫助您瞭解如何使用像導航欄一樣的導航欄的浮標：http://www.cssnewbie.com/super-simple-horizontal-navigation-bar/

來源

2015-04-19 01:03:33

謝謝你的文章！總是對初學者有幫助 – Serendipity

沒問題，希望他們能幫助你 - 當你掌握了它的時候，這很簡單，但是如果你不完全瞭解某些CSS規則，那麼看起來就像是一個雷區。他們不是沒有他們的弱點和例外。 –

nav-bar：對齊內嵌文字，左右

回答

相關問題