具有 css 的菜单栏的无浮动文本对齐

Question

我想在下面的菜单栏中有三个项目在左侧，另一个（电子邮件）在右侧。

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>

如我所见，float（还有 text-align/position）工作。如何将电子邮件 link 移到右侧？

此致，乔纳斯

Answer 1

将 id="eMail" 属性从 <a> 移到父 <li> 元素，因为那些 li 具有浮动样式，它们决定了a 里面的元素。那么 float: right; 应该就足够了。

Answer 2

您可以 select 最后一个元素是带有 nth-child() select 或 select 的电子邮件。下面的代码将电子邮件选项卡放在菜单的右侧。

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

Answer 3

只需这样做：

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

在您现在拥有的 .menubar li 规则之后，删除整个 #eMail-规则

具有 css 的菜单栏的无浮动文本对齐

Text-align without float for menubar with css

html

css

menubar

alignment

css-float