文字對齊不帶浮動用於菜單欄與css

我想在左邊的菜單欄三個項目，右邊的另一個（電子郵件）。文字對齊不帶浮動用於菜單欄與css

ul.menubar { 
 
    list-style-type: none; /* entfernt Bulletpoints */ 
 
    margin-left: 5px; 
 
    padding: 0px; 
 
    overflow-x: hidden; 
 
    background-color: #FFFFFF; 
 
    position: fixed; 
 
    width: 100%; 
 
    z-index: 1; 
 
    border-bottom: solid 1px #D4D4D4; 
 
} 
 

 
ul.menubar li { 
 
    float: left; /* Elemente sind linksbünding NEBENEINANDER angeordnet */ 
 
    margin: 0px 10px 0px 10px; 
 
} 
 

 

 
#eMail { 
 
    position: right; 
 
    display: inline-block; 
 
    text-align: right; 
 
    float: right; 
 
} 
 

 
ul.menubar li a { 
 
    color: black; 
 
    display: inline-block; 
 
    text-align: center; 
 
    padding:15px; /* Innenabstand im Element bis zum Rand */ 
 
    text-decoration: none; /* entfernt Unterstreichen der Elemente*/ 
 
    transition: 0.3s; /* Animation zu :hover*/ 
 
    font-family: Century Gothic; 
 
}

<ul class="menubar" id=topmenubar> 
 
     <li><a href="#linkHome">Logo</a></li> <!-- bedeutet '#' gleicher Link + Ergänzung?--> 
 
     <li><a href="#linkContact">Contact</a></a></li> 
 
     <li><a href="#linkAbout">About</a></li> 
 
     <li><a href="#linkEmail" "id="eMail">eMail</a></li> 
 
</ul>

當我看到浮動（和文本對齊/位置爲好）不起作用。我能做些什麼來將電子郵件鏈接移到右側？

問候，喬納斯

來源

2016-11-20 Jonas

您可以使用nth-child()選擇器選擇電子郵件的最後一個元素。而下面的代碼將電子郵件標籤放在菜單的右側。

li:nth-child(4) { 
    float: right !important; 
}

來源

2016-11-20 22:32:06 acgrdumlu

移動的id="eMail"屬性關閉<a>和到父<li>元件，如本li■找浮動對他們的樣式被確定內部的a元件的放置。那麼float: right;應該就足夠了。

來源

2016-11-20 22:17:53

只是這樣做：

.menubar li:last-of-type { 
float: right; 
}

右鍵，你現在有.menubar li規則後，並刪除整個#eMail -rule

來源

2016-11-20 22:33:08 junkfoodjunkie

文字對齊不帶浮動用於菜單欄與css

回答

相關問題